Fixed #5744 - Deprecated: InputChips

components/lib/autocomplete/AutoComplete.d.ts

@@ -326,6 +326,11 @@ export interface AutoCompleteProps {
      * Property name or getter function that refers to the children options of option group.
      */
     optionGroupChildren?: string | ((data: any) => any[]) | undefined;
+    /**
+     * whether typeahead is active or not.
+     * @defaultValue true
+     */
+    typeahead?: boolean | undefined;
     /**
      * Maximum height of the suggestions overlay.
      * @defaultValue 14rem

components/lib/autocomplete/AutoComplete.vue

@@ -407,28 +407,30 @@ export default {
             this.clicked = false;
         },
         onInput(event) {
-            if (this.searchTimeout) {
-                clearTimeout(this.searchTimeout);
-            }
+            if (this.typeahead) {
+                if (this.searchTimeout) {
+                    clearTimeout(this.searchTimeout);
+                }
 
-            let query = event.target.value;
+                let query = event.target.value;
 
-            if (!this.multiple) {
-                this.updateModel(event, query);
-            }
+                if (!this.multiple) {
+                    this.updateModel(event, query);
+                }
 
-            if (query.length === 0) {
-                this.hide();
-                this.$emit('clear');
-            } else {
-                if (query.length >= this.minLength) {
-                    this.focusedOptionIndex = -1;
-
-                    this.searchTimeout = setTimeout(() => {
-                        this.search(event, query, 'input');
-                    }, this.delay);
-                } else {
+                if (query.length === 0) {
                     this.hide();
+                    this.$emit('clear');
+                } else {
+                    if (query.length >= this.minLength) {
+                        this.focusedOptionIndex = -1;
+
+                        this.searchTimeout = setTimeout(() => {
+                            this.search(event, query, 'input');
+                        }, this.delay);
+                    } else {
+                        this.hide();
+                    }
                 }
             }
         },
@@ -633,15 +635,22 @@ export default {
             event.preventDefault();
         },
         onEnterKey(event) {
-            if (!this.overlayVisible) {
-                this.focusedOptionIndex = -1; // reset
-                this.onArrowDownKey(event);
-            } else {
-                if (this.focusedOptionIndex !== -1) {
-                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+            if (!this.typeahead) {
+                if (this.multiple) {
+                    this.updateModel(event, [...(this.modelValue || []), event.target.value]);
+                    this.$refs.focusInput.value = '';
                 }
+            } else {
+                if (!this.overlayVisible) {
+                    this.focusedOptionIndex = -1; // reset
+                    this.onArrowDownKey(event);
+                } else {
+                    if (this.focusedOptionIndex !== -1) {
+                        this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                    }
 
-                this.hide();
+                    this.hide();
+                }
             }
         },
         onEscapeKey(event) {

components/lib/autocomplete/BaseAutoComplete.vue

@@ -121,6 +121,10 @@ export default {
             type: [String, Object],
             default: null
         },
+        loader: {
+            type: String,
+            default: null
+        },
         loadingIcon: {
             type: String,
             default: null
@@ -173,6 +177,10 @@ export default {
             type: Number,
             default: 0
         },
+        typeahead: {
+            type: Boolean,
+            default: true
+        },
         ariaLabel: {
             type: String,
             default: null