input: fix textarea ref (ElemeFE#13803)

Author: island205

packages/autocomplete/src/autocomplete.vue

@@ -149,7 +149,10 @@
     },
     watch: {
       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: {
@@ -248,15 +251,19 @@
           suggestion.scrollTop -= highlightItem.scrollHeight;
         }
         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() {
       this.debouncedGetData = debounce(this.debounce, this.getData);
       this.$on('item-click', item => {
         this.select(item);
       });
-      let $input = this.$el.querySelector('.el-input__inner');
+      let $input = this.getInput();
       $input.setAttribute('role', 'textbox');
       $input.setAttribute('aria-autocomplete', 'list');
       $input.setAttribute('aria-controls', 'id');

packages/input/src/input.vue

@@ -221,10 +221,10 @@
 
     methods: {
       focus() {
-        (this.$refs.input || this.$refs.textarea).focus();
+        this.getInput().focus();
       },
       blur() {
-        (this.$refs.input || this.$refs.textarea).blur();
+        this.getInput().blur();
       },
       getMigratingConfig() {
         return {
@@ -245,7 +245,7 @@
         }
       },
       select() {
-        (this.$refs.input || this.$refs.textarea).select();
+        this.getInput().select();
       },
       resizeTextarea() {
         if (this.$isServer) return;
@@ -286,7 +286,10 @@
 
         // set input's value, in case parent refuses the change
         // 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) {
         this.$emit('change', event.target.value);
@@ -322,6 +325,9 @@
         this.$emit('input', '');
         this.$emit('change', '');
         this.$emit('clear');
+      },
+      getInput() {
+        return this.$refs.input || this.$refs.textarea;
       }
     },