Skip to content

Input: fix autocomplete property is not compatible with native #12513 #12514

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jikkai merged 9 commits into from
Aug 28, 2018
Merged

Input: fix autocomplete property is not compatible with native #12513 #12514

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9e0d2f3
fix #12513
axetroy Aug 27, 2018
a3864e0
fix: fallback for autoComplete and print deprecated warning
axetroy Aug 27, 2018
6132362
fix: fix auto-complete property in select component
axetroy Aug 27, 2018
cb981a1
fix default complete value
axetroy Aug 27, 2018
6857973
Docs: Update document for autocomplete property change
axetroy Aug 27, 2018
d461e7b
Docs: remove redundant documents
axetroy Aug 27, 2018
10a9734
remove unnecessary console log message\
axetroy Aug 27, 2018
b180f80
Update select.md
jikkai Aug 28, 2018
9ca0ba6
fix: add missing declaration in select.d.ts
axetroy Aug 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/docs/en-US/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions examples/docs/en-US/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion examples/docs/en-US/input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | — | — | — |
Expand Down
3 changes: 2 additions & 1 deletion examples/docs/en-US/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
2 changes: 1 addition & 1 deletion examples/docs/es/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions examples/docs/es/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion examples/docs/es/input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | — | — | — |
Expand Down
3 changes: 2 additions & 1 deletion examples/docs/es/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
2 changes: 1 addition & 1 deletion examples/docs/zh-CN/dialog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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="请选择活动区域">
Expand Down
6 changes: 3 additions & 3 deletions examples/docs/zh-CN/form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion examples/docs/zh-CN/input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | 原生属性，设置最大值 | — | — | — |
Expand Down
3 changes: 2 additions & 1 deletion examples/docs/zh-CN/select.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
Expand Down
13 changes: 11 additions & 2 deletions packages/input/src/input.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
:type="type"
:disabled="inputDisabled"
:readonly="readonly"
:autocomplete="autoComplete"
:autocomplete="autoComplete || autocomplete"
:value="currentValue"
ref="input"
@compositionstart="handleComposition"
Expand Down Expand Up @@ -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
Expand Down
15 changes: 12 additions & 3 deletions packages/select/src/select.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@
class="el-select__input"
:class="[selectSize ? `is-${ selectSize }` : '']"
:disabled="selectDisabled"
:autocomplete="autoComplete"
:autocomplete="autoComplete || autocomplete"
Copy link
Contributor

@ziyoung ziyoung Aug 27, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

不如把 autocomplete 放在前。

Copy link
Contributor Author

@axetroy axetroy Aug 27, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ziyoung
这个是为了向下兼容，确保以前使用 auto-complete 的依旧生效

所以这里 autoComplete 不再有默认值，默认值给了 autocomplete

如果以前设置了 auto-complete, 依旧优先取这个值，同时打印弃用的警告信息, 没有则取 autocomplete

@focus="handleFocus"
@blur="softFocus = false"
@click.stop
Expand All @@ -74,7 +74,7 @@
:placeholder="currentPlaceholder"
:name="name"
:id="id"
:auto-complete="autoComplete"
:autocomplete="autoComplete || autocomplete"
:size="selectSize"
:disabled="selectDisabled"
:readonly="readonly"
Expand Down Expand Up @@ -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,
Expand Down
5 changes: 4 additions & 1 deletion types/input.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
6 changes: 6 additions & 0 deletions types/select.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down