From ec6cac42325507f145f85b85568ca75fcdefece7 Mon Sep 17 00:00:00 2001 From: Axetroy Date: Tue, 28 Aug 2018 15:44:21 +0800 Subject: [PATCH] Input: fix autocomplete property is not compatible with native #12513 (#12514) * fix #12513 * fix: fallback for autoComplete and print deprecated warning * fix: fix auto-complete property in select component * fix default complete value * Docs: Update document for autocomplete property change * Docs: remove redundant documents * remove unnecessary console log message\ * Update select.md * fix: add missing declaration in select.d.ts --- examples/docs/en-US/dialog.md | 2 +- examples/docs/en-US/form.md | 6 +++--- examples/docs/en-US/input.md | 3 ++- examples/docs/en-US/select.md | 3 ++- examples/docs/es/dialog.md | 2 +- examples/docs/es/form.md | 6 +++--- examples/docs/es/input.md | 3 ++- examples/docs/es/select.md | 3 ++- examples/docs/zh-CN/dialog.md | 2 +- examples/docs/zh-CN/form.md | 6 +++--- examples/docs/zh-CN/input.md | 3 ++- examples/docs/zh-CN/select.md | 3 ++- packages/input/src/input.vue | 13 +++++++++++-- packages/select/src/select.vue | 15 ++++++++++++--- types/input.d.ts | 5 ++++- types/select.d.ts | 6 ++++++ 16 files changed, 57 insertions(+), 24 deletions(-) diff --git a/examples/docs/en-US/dialog.md b/examples/docs/en-US/dialog.md index f47b3a9b3..56649ddc5 100644 --- a/examples/docs/en-US/dialog.md +++ b/examples/docs/en-US/dialog.md @@ -147,7 +147,7 @@ The content of Dialog can be anything, even a table or a form. This example show - + diff --git a/examples/docs/en-US/form.md b/examples/docs/en-US/form.md index 628b3e4cf..a0ffbb661 100644 --- a/examples/docs/en-US/form.md +++ b/examples/docs/en-US/form.md @@ -538,10 +538,10 @@ This example shows how to customize your own validation rules to finish a two-fa ```html - + - + @@ -719,7 +719,7 @@ This example shows how to customize your own validation rules to finish a two-fa { type: 'number', message: 'age must be a number'} ]" > - + Submit diff --git a/examples/docs/en-US/input.md b/examples/docs/en-US/input.md index e1a47df01..650d9b988 100644 --- a/examples/docs/en-US/input.md +++ b/examples/docs/en-US/input.md @@ -654,7 +654,8 @@ Search data from server-side. | suffix-icon | suffix icon class | string | — | — | |rows | number of rows of textarea, only works when `type` is 'textarea' | number | — | 2 | |autosize | whether textarea has an adaptive height, only works when `type` is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 } | boolean / object | — | false | -|auto-complete | same as `auto-complete` in native input | string | on/off | off | +|autocomplete | same as `autocomplete` in native input | string | on/off | off | +|auto-complete | @DEPRECATED in next major version | string | on/off | off | |name | same as `name` in native input | string | — | — | | readonly | same as `readonly` in native input | boolean | — | false | |max | same as `max` in native input | — | — | — | diff --git a/examples/docs/en-US/select.md b/examples/docs/en-US/select.md index 5d0f09525..67f0ec0d8 100644 --- a/examples/docs/en-US/select.md +++ b/examples/docs/en-US/select.md @@ -670,7 +670,8 @@ If the binding value of Select is an object, make sure to assign `value-key` as | collapse-tags | whether to collapse tags to a text when multiple selecting | boolean | — | false | | multiple-limit | maximum number of options user can select when `multiple` is `true`. No limit when set to 0 | number | — | 0 | | name | the name attribute of select input | string | — | — | -| auto-complete | the autocomplete attribute of select input | string | — | off | +| autocomplete | the autocomplete attribute of select input | string | — | off | +| auto-complete | @DEPRECATED in next major version | string | — | off | | placeholder | placeholder | string | — | Select | | filterable | whether Select is filterable | boolean | — | false | | allow-create | whether creating new items is allowed. To use this, `filterable` must be true | boolean | — | false | diff --git a/examples/docs/es/dialog.md b/examples/docs/es/dialog.md index f0c6eed1b..017f43777 100644 --- a/examples/docs/es/dialog.md +++ b/examples/docs/es/dialog.md @@ -151,7 +151,7 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu - + diff --git a/examples/docs/es/form.md b/examples/docs/es/form.md index f339a1c76..f73865b75 100644 --- a/examples/docs/es/form.md +++ b/examples/docs/es/form.md @@ -539,10 +539,10 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f ```html - + - + @@ -721,7 +721,7 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f { type: 'number', message: 'age must be a number'} ]" > - + Submit diff --git a/examples/docs/es/input.md b/examples/docs/es/input.md index d71306cad..7c8a4cb55 100644 --- a/examples/docs/es/input.md +++ b/examples/docs/es/input.md @@ -633,7 +633,8 @@ Búsqueda de datos desde el servidor. | suffix-icon | clase del icono de sufijo | string | — | — | | rows | número de filas, sólo funciona cuando `type` es 'textarea'. | number | — | 2 | | autosize | si textarea tiene una altura adaptativa, sólo funciona cuando el`type` es 'textarea'. Puede aceptar un objeto, p. ej. { minRows: 2, maxRows: 6 } | boolean / object | — | false | -| auto-complete | igual que `auto-complete` en el input nativo | string | on/off | off | +| autocomplete | igual que `autocomplete` en el input nativo | string | on/off | off | +| auto-complete | @DEPRECATED in next major version | string | on/off | off | | name | igual que `name` en el input nativo | string | — | — | | readonly | igual que `readonly` en el input nativo | boolean | — | false | | max | igual que `max` en el input nativo | — | — | — | diff --git a/examples/docs/es/select.md b/examples/docs/es/select.md index c2bbbdbb0..94ce3a0da 100644 --- a/examples/docs/es/select.md +++ b/examples/docs/es/select.md @@ -676,7 +676,8 @@ Si el valor de encuadernación de Select es un objeto, asegúrese de asignar `va | clearable | si el single select puede ser limpiable | boolean | — | false | | multiple-limit | maximo numero de opciones que el usuario puede seleccionar cuando `multiple` es `true`. Sin límite cuando se fija a 0 | number | — | 0 | | name | el atributo `name` del input seleccionado | string | — | — | -| auto-complete | el atributo `autocomplete` del input seleccionado | string | — | off | +| autocomplete | el atributo `autocomplete` del input seleccionado | string | — | off | +| auto-complete | @DEPRECATED in next major version | string | — | off | | placeholder | placeholder | string | — | Select | | filterable | si Select es filtrable | boolean | — | false | | allow-create | si esta permitido crear nuevos items. Para usar esto, `filterable` debe ser `true`. | boolean | — | false | diff --git a/examples/docs/zh-CN/dialog.md b/examples/docs/zh-CN/dialog.md index 4dfe9f07e..9cc1b0d7a 100644 --- a/examples/docs/zh-CN/dialog.md +++ b/examples/docs/zh-CN/dialog.md @@ -144,7 +144,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下 - + diff --git a/examples/docs/zh-CN/form.md b/examples/docs/zh-CN/form.md index 053ed594a..413b0cf5c 100644 --- a/examples/docs/zh-CN/form.md +++ b/examples/docs/zh-CN/form.md @@ -527,10 +527,10 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h ```html - + - + @@ -706,7 +706,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h { type: 'number', message: '年龄必须为数字值'} ]" > - + 提交 diff --git a/examples/docs/zh-CN/input.md b/examples/docs/zh-CN/input.md index 302d94d79..3da3ddd97 100644 --- a/examples/docs/zh-CN/input.md +++ b/examples/docs/zh-CN/input.md @@ -810,7 +810,8 @@ export default { | suffix-icon | 输入框尾部图标 | string | — | — | | rows | 输入框行数，只对 `type="textarea"` 有效 | number | — | 2 | | autosize | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 } | boolean / object | — | false | -| auto-complete | 原生属性，自动补全 | string | on, off | off | +| autocomplete | 原生属性，自动补全 | string | on, off | off | +| auto-complete | 下个主版本弃用 | string | on, off | off | | name | 原生属性 | string | — | — | | readonly | 原生属性，是否只读 | boolean | — | false | | max | 原生属性，设置最大值 | — | — | — | diff --git a/examples/docs/zh-CN/select.md b/examples/docs/zh-CN/select.md index 1702b301d..3d526d3d0 100644 --- a/examples/docs/zh-CN/select.md +++ b/examples/docs/zh-CN/select.md @@ -665,7 +665,8 @@ | collapse-tags | 多选时是否将选中值按文字的形式展示 | boolean | — | false | | multiple-limit | 多选时用户最多可以选择的项目数，为 0 则不限制 | number | — | 0 | | name | select input 的 name 属性 | string | — | — | -| auto-complete | select input 的 autocomplete 属性 | string | — | off | +| autocomplete | select input 的 autocomplete 属性 | string | — | off | +| auto-complete | 下个主版本弃用 | string | — | off | | placeholder | 占位符 | string | — | 请选择 | | filterable | 是否可搜索 | boolean | — | false | | allow-create | 是否允许用户创建新条目，需配合 `filterable` 使用 | boolean | — | false | diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue index 9a52954a3..44f667507 100644 --- a/packages/input/src/input.vue +++ b/packages/input/src/input.vue @@ -27,7 +27,7 @@ :type="type" :disabled="inputDisabled" :readonly="readonly" - :autocomplete="autoComplete" + :autocomplete="autoComplete || autocomplete" :value="currentValue" ref="input" @compositionstart="handleComposition" @@ -149,10 +149,19 @@ type: [Boolean, Object], default: false }, - autoComplete: { + autocomplete: { type: String, default: 'off' }, + /** @Deprecated in next major version */ + autoComplete: { + type: String, + validator(val) { + process.env.NODE_ENV !== 'production' && + console.warn('[Element Warn][Input]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.'); + return true; + } + }, validateEvent: { type: Boolean, default: true diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue index 184de5d6d..e35db542e 100644 --- a/packages/select/src/select.vue +++ b/packages/select/src/select.vue @@ -47,7 +47,7 @@ class="el-select__input" :class="[selectSize ? `is-${ selectSize }` : '']" :disabled="selectDisabled" - :autocomplete="autoComplete" + :autocomplete="autoComplete || autocomplete" @focus="handleFocus" @blur="softFocus = false" @click.stop @@ -74,7 +74,7 @@ :placeholder="currentPlaceholder" :name="name" :id="id" - :auto-complete="autoComplete" + :autocomplete="autoComplete || autocomplete" :size="selectSize" :disabled="selectDisabled" :readonly="readonly" @@ -259,10 +259,19 @@ value: { required: true }, - autoComplete: { + autocomplete: { type: String, default: 'off' }, + /** @Deprecated in next major version */ + autoComplete: { + type: String, + validator(val) { + process.env.NODE_ENV !== 'production' && + console.warn('[Element Warn][Select]\'auto-complete\' property will be deprecated in next major version. please use \'autocomplete\' instead.'); + return true; + } + }, automaticDropdown: Boolean, size: String, disabled: Boolean, diff --git a/types/input.d.ts b/types/input.d.ts index 3ac3b5c32..5d02b4383 100644 --- a/types/input.d.ts +++ b/types/input.d.ts @@ -48,9 +48,12 @@ export declare class ElInput extends ElementUIComponent { /** Whether textarea has an adaptive height, only works when type is 'textarea' */ autosize: boolean | AutoSize - /** Same as auto-complete in native input */ + /** @Deprecated in next major version */ autoComplete: string + /** Same as autocomplete in native input */ + autocomplete: string + /** Same as name in native input */ name: string diff --git a/types/select.d.ts b/types/select.d.ts index 1df71c9eb..110835ea9 100644 --- a/types/select.d.ts +++ b/types/select.d.ts @@ -30,6 +30,12 @@ export declare class ElSelect extends ElementUIComponent { /** Maximum number of options user can select when multiple is true. No limit when set to 0 */ multipleLimit: number + /** @Deprecated in next major version */ + autoComplete: string + + /** Same as autocomplete in native input */ + autocomplete: string + /** The name attribute of select input */ name: string