diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts index a5c97bc3d..812dc1def 100755 --- a/components/lib/autocomplete/AutoComplete.d.ts +++ b/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 diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue index 440f1cccc..a9f05f28d 100755 --- a/components/lib/autocomplete/AutoComplete.vue +++ b/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) { diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue index 4bb74ee4f..c5c9c128e 100644 --- a/components/lib/autocomplete/BaseAutoComplete.vue +++ b/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 diff --git a/components/lib/inputchips/InputChips.vue b/components/lib/inputchips/InputChips.vue index 3708fda7f..e23251905 100755 --- a/components/lib/inputchips/InputChips.vue +++ b/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: { diff --git a/doc/autocomplete/MultipleDoc.vue b/doc/autocomplete/MultipleDoc.vue index 60018de8b..e85b23754 100644 --- a/doc/autocomplete/MultipleDoc.vue +++ b/doc/autocomplete/MultipleDoc.vue @@ -3,7 +3,9 @@
Multiple mode is enabled using multiple property used to select more than one value from the autocomplete. In this case, value reference should be an array.