mirror of https://github.com/ElemeFE/element
input: fix textarea ref (#13803)
parent
e9aae8f706
commit
c154292d1b
|
@ -149,7 +149,10 @@
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
suggestionVisible(val) {
|
suggestionVisible(val) {
|
||||||
this.broadcast('ElAutocompleteSuggestions', 'visible', [val, this.$refs.input.$refs.input.offsetWidth]);
|
let $input = this.getInput();
|
||||||
|
if ($input) {
|
||||||
|
this.broadcast('ElAutocompleteSuggestions', 'visible', [val, $input.offsetWidth]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
@ -248,7 +251,11 @@
|
||||||
suggestion.scrollTop -= highlightItem.scrollHeight;
|
suggestion.scrollTop -= highlightItem.scrollHeight;
|
||||||
}
|
}
|
||||||
this.highlightedIndex = index;
|
this.highlightedIndex = index;
|
||||||
this.$el.querySelector('.el-input__inner').setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
|
let $input = this.getInput();
|
||||||
|
$input.setAttribute('aria-activedescendant', `${this.id}-item-${this.highlightedIndex}`);
|
||||||
|
},
|
||||||
|
getInput() {
|
||||||
|
return this.$refs.input.getInput();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -256,7 +263,7 @@
|
||||||
this.$on('item-click', item => {
|
this.$on('item-click', item => {
|
||||||
this.select(item);
|
this.select(item);
|
||||||
});
|
});
|
||||||
let $input = this.$el.querySelector('.el-input__inner');
|
let $input = this.getInput();
|
||||||
$input.setAttribute('role', 'textbox');
|
$input.setAttribute('role', 'textbox');
|
||||||
$input.setAttribute('aria-autocomplete', 'list');
|
$input.setAttribute('aria-autocomplete', 'list');
|
||||||
$input.setAttribute('aria-controls', 'id');
|
$input.setAttribute('aria-controls', 'id');
|
||||||
|
|
|
@ -221,10 +221,10 @@
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
focus() {
|
focus() {
|
||||||
(this.$refs.input || this.$refs.textarea).focus();
|
this.getInput().focus();
|
||||||
},
|
},
|
||||||
blur() {
|
blur() {
|
||||||
(this.$refs.input || this.$refs.textarea).blur();
|
this.getInput().blur();
|
||||||
},
|
},
|
||||||
getMigratingConfig() {
|
getMigratingConfig() {
|
||||||
return {
|
return {
|
||||||
|
@ -245,7 +245,7 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
select() {
|
select() {
|
||||||
(this.$refs.input || this.$refs.textarea).select();
|
this.getInput().select();
|
||||||
},
|
},
|
||||||
resizeTextarea() {
|
resizeTextarea() {
|
||||||
if (this.$isServer) return;
|
if (this.$isServer) return;
|
||||||
|
@ -286,7 +286,10 @@
|
||||||
|
|
||||||
// set input's value, in case parent refuses the change
|
// set input's value, in case parent refuses the change
|
||||||
// see: https://github.com/ElemeFE/element/issues/12850
|
// see: https://github.com/ElemeFE/element/issues/12850
|
||||||
this.$nextTick(() => { this.$refs.input.value = this.value; });
|
this.$nextTick(() => {
|
||||||
|
let input = this.getInput();
|
||||||
|
input.value = this.value;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
handleChange(event) {
|
handleChange(event) {
|
||||||
this.$emit('change', event.target.value);
|
this.$emit('change', event.target.value);
|
||||||
|
@ -322,6 +325,9 @@
|
||||||
this.$emit('input', '');
|
this.$emit('input', '');
|
||||||
this.$emit('change', '');
|
this.$emit('change', '');
|
||||||
this.$emit('clear');
|
this.$emit('clear');
|
||||||
|
},
|
||||||
|
getInput() {
|
||||||
|
return this.$refs.input || this.$refs.textarea;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue