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) {
+            if (this.typeahead) {
-                clearTimeout(this.searchTimeout);
+                if (this.searchTimeout) {
-            }
+                    clearTimeout(this.searchTimeout);
+                }
 
-            let query = event.target.value;
+                let query = event.target.value;
 
-            if (!this.multiple) {
+                if (!this.multiple) {
-                this.updateModel(event, query);
+                    this.updateModel(event, query);
-            }
+                }
 
-            if (query.length === 0) {
+                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();
+                    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) {
+            if (!this.typeahead) {
-                this.focusedOptionIndex = -1; // reset
+                if (this.multiple) {
-                this.onArrowDownKey(event);
+                    this.updateModel(event, [...(this.modelValue || []), event.target.value]);
-            } else {
+                    this.$refs.focusInput.value = '';
-                if (this.focusedOptionIndex !== -1) {
-                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
                 }
+            } 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

components/lib/inputchips/InputChips.vue

@@ -83,6 +83,7 @@ export default {
         }
     },
     mounted() {
+        console.warn('Deprecated since v4. Use AutoComplete component instead with its typeahead property.');
         this.id = this.id || UniqueComponentId();
     },
     methods: {

doc/autocomplete/MultipleDoc.vue

@@ -3,7 +3,9 @@
         <p>Multiple mode is enabled using <i>multiple</i> property used to select more than one value from the autocomplete. In this case, value reference should be an array.</p>
     </DocSectionText>
     <div class="card p-fluid">
+        {{ value }}
         <AutoComplete v-model="value" multiple :suggestions="items" @complete="search" />
+        <AutoComplete v-model="value" :typeahead="false" :suggestions="items" @complete="search" />
     </div>
     <DocSectionCode :code="code" />
 </template>

doc/common/apidoc/index.json

@@ -4546,6 +4546,14 @@
                             "default": "",
                             "description": "Property name or getter function that refers to the children options of option group."
                         },
+                        {
+                            "name": "typeahead",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "true",
+                            "description": "whether typeahead is active or not."
+                        },
                         {
                             "name": "scrollHeight",
                             "optional": true,
@@ -8844,6 +8852,22 @@
                             "default": "",
                             "description": "Used to pass attributes to the dropdown icon's DOM element."
                         },
+                        {
+                            "name": "inputIconContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input icon container's DOM element."
+                        },
+                        {
+                            "name": "inputIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input icon's DOM element."
+                        },
                         {
                             "name": "panel",
                             "optional": true,
@@ -24948,6 +24972,22 @@
                             "default": "",
                             "description": "Used to pass attributes to the dropdown icon's DOM element."
                         },
+                        {
+                            "name": "inputIconContainer",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input icon container's DOM element."
+                        },
+                        {
+                            "name": "inputIcon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DatePickerPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input icon's DOM element."
+                        },
                         {
                             "name": "panel",
                             "optional": true,
@@ -68759,6 +68799,14 @@
                             "default": "",
                             "description": "Used to pass attributes to the root's DOM element."
                         },
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ToggleButtonPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the content's DOM element."
+                        },
                         {
                             "name": "icon",
                             "optional": true,