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

@@ -147,7 +147,7 @@ The content of Dialog can be anything, even a table or a form. This example show
 <el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="Promotion name" :label-width="formLabelWidth">
-      <el-input v-model="form.name" auto-complete="off"></el-input>
+      <el-input v-model="form.name" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="Zones" :label-width="formLabelWidth">
       <el-select v-model="form.region" placeholder="Please select a zone">

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
 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Confirm" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
@@ -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'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>

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 | — | — | — |

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 |

examples/docs/es/dialog.md

@@ -151,7 +151,7 @@ El contenido del Diálogo puede ser cualquier cosa, incluso una tabla o un formu
 <el-dialog title="Shipping address" :visible.sync="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="Promotion name" :label-width="formLabelWidth">
-      <el-input v-model="form.name" auto-complete="off"></el-input>
+      <el-input v-model="form.name" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="Zones" :label-width="formLabelWidth">
       <el-select v-model="form.region" placeholder="Please select a zone">

examples/docs/es/form.md

@@ -539,10 +539,10 @@ Este ejemplo muestra cómo personalizar sus propias reglas de validación para f
 ```html
 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
   <el-form-item label="Password" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Confirm" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="Age" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
@@ -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'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>

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       | —                | —                                | —           |

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            |

examples/docs/zh-CN/dialog.md

@@ -144,7 +144,7 @@ Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下
 <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
   <el-form :model="form">
     <el-form-item label="活动名称" :label-width="formLabelWidth">
-      <el-input v-model="form.name" auto-complete="off"></el-input>
+      <el-input v-model="form.name" autocomplete="off"></el-input>
     </el-form-item>
     <el-form-item label="活动区域" :label-width="formLabelWidth">
       <el-select v-model="form.region" placeholder="请选择活动区域">

examples/docs/zh-CN/form.md

@@ -527,10 +527,10 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
 ```html
 <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
   <el-form-item label="密码" prop="pass">
-    <el-input type="password" v-model="ruleForm2.pass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="确认密码" prop="checkPass">
-    <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
+    <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item label="年龄" prop="age">
     <el-input v-model.number="ruleForm2.age"></el-input>
@@ -706,7 +706,7 @@ W3C 标准中有如下[规定](https://www.w3.org/MarkUp/html-spec/html-spec_8.h
       { type: 'number', message: '年龄必须为数字值'}
     ]"
   >
-    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
   </el-form-item>
   <el-form-item>
     <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>

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 | 原生属性，设置最大值 | — | — | — |

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 |

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

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,

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
 

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