Autocomplete: add clearable prop (#12171)

* Autocomplete: add clearable prop

* Input: remove focus after clearing the value

* Autocomplete: hide options after clearing the value

examples/docs/en-US/input.md

@@ -699,6 +699,7 @@ Search data from server-side.
 Attribute | Description | Type | Options | Default
 |----| ----| ----| ---- | -----|
 |placeholder| the placeholder of Autocomplete| string | — | — |
+| clearable | whether to show clear button | boolean | — | false |
 |disabled | whether Autocomplete is disabled  | boolean | — | false|
 | value-key | key name of the input suggestion object for display | string | — | value |
 |icon | icon name | string | — | — |

packages/autocomplete/src/autocomplete.vue

@@ -90,6 +90,10 @@
       popperClass: String,
       popperOptions: Object,
       placeholder: String,
+      clearable: {
+        type: Boolean,
+        default: false
+      },
       disabled: Boolean,
       name: String,
       size: String,
@@ -195,6 +199,7 @@
         this.$emit('blur', event);
       },
       handleClear() {
+        this.activated = false;
         this.$emit('clear');
       },
       close(e) {

packages/input/src/input.vue

@@ -330,7 +330,6 @@
         this.$emit('change', '');
         this.$emit('clear');
         this.setCurrentValue('');
-        this.focus();
       }
     },
 

types/autocomplete.d.ts

@@ -26,6 +26,9 @@ export declare class ElAutocomplete extends ElementUIComponent {
   /** The placeholder of Autocomplete */
   placeholder: string
 
+  /** Whether to show clear button */
+  clearable: boolean
+
   /** Whether Autocomplete is disabled */
   disabled: boolean