primevue 3.15.0 → 3.16.0

package/autocomplete/AutoComplete.vue

@@ -1,54 +1,61 @@
 <template>
-    <span ref="container" :class="containerClass" aria-haspopup="listbox" :aria-owns="listId" :aria-expanded="overlayVisible" :style="style">
-        <input ref="input" :class="inputFieldClass" :style="inputStyle" v-bind="$attrs" :value="inputValue" @click="onInputClicked" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @change="onChange"
-            type="text" autoComplete="off" v-if="!multiple" role="searchbox" aria-autocomplete="list" :aria-controls="listId">
-        <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
-            <li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
-                <slot name="chip" :value="item">
-                    <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
+    <div ref="container" :class="containerClass" @click="onContainerClick">
+        <input v-if="!multiple" ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputStyleClass" :value="inputValue" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
+            role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
+        <ul v-if="multiple" ref="multiContainer" :class="multiContainerClass" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-activedescendant="focused ? focusedMultipleOptionId : undefined"
+            @focus="onMultipleContainerFocus" @blur="onMultipleContainerBlur" @keydown="onMultipleContainerKeyDown">
+            <li v-for="(option, i) of modelValue" :key="i" :id="id + '_multiple_option_' + i" :class="['p-autocomplete-token', {'p-focus': focusedMultipleOptionIndex === i}]"
+                role="option" :aria-label="getOptionLabel(option)" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
+                <slot name="chip" :value="option">
+                    <span class="p-autocomplete-token-label">{{getOptionLabel(option)}}</span>
                 </slot>
-                <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
+                <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeOption($event, i)" aria-hidden="true"></span>
             </li>
-            <li class="p-autocomplete-input-token">
-                <input ref="input" type="text" autoComplete="off" v-bind="$attrs" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown"  @change="onChange"
-                    role="searchbox" aria-autocomplete="list" :aria-controls="listId">
+            <li class="p-autocomplete-input-token" role="option">
+                <input ref="focusInput" :id="inputId" type="text" :style="inputStyle" :class="inputClass" :placeholder="placeholder" :tabindex="!disabled ? tabindex : -1" :disabled="disabled" autocomplete="off"
+                    role="combobox" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" aria-haspopup="listbox" aria-autocomplete="list" :aria-expanded="overlayVisible" :aria-controls="id + '_list'" :aria-activedescendant="focused ? focusedOptionId : undefined"
+                    @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @input="onInput" @change="onChange" v-bind="inputProps" />
             </li>
         </ul>
-        <i :class="loadingIconClass" v-if="searching"></i>
-        <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
+        <i v-if="searching" :class="loadingIconClass" aria-hidden="true"></i>
+        <Button v-if="dropdown" ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" tabindex="-1" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" />
+        <span role="status" aria-live="polite" class="p-hidden-accessible">
+            {{searchResultMessageText}}
+        </span>
         <Portal :appendTo="appendTo">
-            <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
-                <div :ref="overlayRef" :class="panelStyleClass" :style="{'max-height': virtualScrollerDisabled ? scrollHeight : ''}" v-if="overlayVisible" @click="onOverlayClick">
-                    <slot name="header" :value="modelValue" :suggestions="suggestions"></slot>
-                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="suggestions" :disabled="virtualScrollerDisabled">
-                        <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle }">
-                            <ul :id="listId" :ref="(el) => listRef(el, contentRef)" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
-                                <template v-if="!optionGroupLabel">
-                                    <li v-for="(item, i) of items" class="p-autocomplete-item" :key="getOptionRenderKey(item)" @click="selectItem($event, item)" role="option" v-ripple :data-index="getOptionIndex(i, getItemOptions)">
-                                        <slot name="item" :item="item" :index="getOptionIndex(i, getItemOptions)">{{getItemContent(item)}}</slot>
+            <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
+                <div v-if="overlayVisible" :ref="overlayRef" :class="panelStyleClass" :style="{...panelStyle, 'max-height': virtualScrollerDisabled ? scrollHeight : ''}" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="panelProps">
+                    <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
+                    <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{'height': scrollHeight}" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled">
+                        <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="['p-autocomplete-items', styleClass]" :style="contentStyle" role="listbox">
+                                <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
+                                    <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}" class="p-autocomplete-item-group" role="option">
+                                        <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(option.optionGroup)}}</slot>
+                                    </li>
+                                    <li v-else v-ripple :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{height: itemSize ? itemSize + 'px' : undefined}"
+                                        :class="['p-autocomplete-item', {'p-highlight': isSelected(option), 'p-focus': focusedOptionIndex === getOptionIndex(i, getItemOptions), 'p-disabled': isOptionDisabled(option)}]"
+                                        role="option" :aria-label="getOptionLabel(option)" :aria-selected="isSelected(option)" :aria-disabled="isOptionDisabled(option)" :aria-setsize="ariaSetSize" :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
+                                        @click="onOptionSelect($event, option)" @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))">
+                                        <slot v-if="$slots.option" name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot>
+                                        <slot v-else name="item" :item="option" :index="getOptionIndex(i, getItemOptions)">{{getOptionLabel(option)}}</slot> <!--TODO: Deprecated since v3.16.0-->
                                     </li>
-                                </template>
-                                <template v-else>
-                                    <template v-for="(optionGroup, i) of items" :key="getOptionGroupRenderKey(optionGroup)">
-                                        <li  class="p-autocomplete-item-group">
-                                            <slot name="optiongroup" :item="optionGroup" :index="getOptionIndex(i, getItemOptions)">{{getOptionGroupLabel(optionGroup)}}</slot>
-                                        </li>
-                                        <li v-for="(item, j) of getOptionGroupChildren(optionGroup)" class="p-autocomplete-item" :key="j" @click="selectItem($event, item)" role="option" v-ripple :data-group="i" :data-index="getOptionIndex(j, getItemOptions)">
-                                            <slot name="item" :item="item" :index="getOptionIndex(j, getItemOptions)">{{getItemContent(item)}}</slot>
-                                        </li>
-                                    </template>
                                 </template>
                             </ul>
+                            <span role="status" aria-live="polite" class="p-hidden-accessible">
+                                {{selectedMessageText}}
+                            </span>
                         </template>
-                        <template v-slot:loader="{ options }" v-if="$slots.loader">
+                        <template v-if="$slots.loader" v-slot:loader="{ options }">
                             <slot name="loader" :options="options"></slot>
                         </template>
                     </VirtualScroller>
-                    <slot name="footer" :value="modelValue" :suggestions="suggestions"></slot>
+                    <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
                 </div>
             </transition>
         </Portal>
-    </span>
+    </div>
 </template>
 
 <script>
@@ -61,18 +68,19 @@ import Portal from 'primevue/portal';
 
 export default {
     name: 'AutoComplete',
-    inheritAttrs: false,
-    emits: ['update:modelValue', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete'],
+    emits: ['update:modelValue', 'change', 'focus', 'blur', 'item-select', 'item-unselect', 'dropdown-click', 'clear', 'complete', 'before-show', 'before-hide', 'show', 'hide'],
     props: {
         modelValue: null,
         suggestions: {
             type: Array,
             default: null
         },
-        field: {
+        field: { // TODO: Deprecated since v3.16.0
             type: [String,Function],
             default: null
         },
+        optionLabel: null,
+        optionDisabled: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
         scrollHeight: {
@@ -87,7 +95,7 @@ export default {
             type: String,
             default: 'blank'
         },
-        autoHighlight: {
+        autoHighlight: { // TODO: Deprecated since v3.16.0
             type: Boolean,
             default: false
         },
@@ -95,6 +103,18 @@ export default {
             type: Boolean,
             default: false
         },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        dataKey: {
+            type: String,
+            default: null
+        },
         minLength: {
             type: Number,
             default: 1
@@ -115,45 +135,95 @@ export default {
             type: Boolean,
             default: false
         },
-        inputClass: null,
+        inputId: String,
         inputStyle: null,
-        class: null,
-        style: null,
+        inputClass: null,
+        inputProps: null,
+        panelStyle: null,
         panelClass: null,
+        panelProps: null,
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner'
+        },
         virtualScrollerOptions: {
             type: Object,
             default: null
         },
-        loadingIcon: {
+        autoOptionFocus: {
+            type: Boolean,
+            default: true
+        },
+        searchLocale: {
             type: String,
-            default: 'pi pi-spinner'
+            default: undefined
+        },
+        searchMessage: {
+            type: String,
+            default: null
+        },
+        selectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySelectionMessage: {
+            type: String,
+            default: null
+        },
+        emptySearchMessage: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        'aria-label': {
+            type: String,
+            default: null
+        },
+        'aria-labelledby': {
+            type: String,
+            default: null
         }
     },
-    timeout: null,
     outsideClickListener: null,
     resizeListener: null,
     scrollHandler: null,
     overlay: null,
     virtualScroller: null,
+    searchTimeout: null,
+    selectOnFocus: false,
+    focusOnHover: false,
     data() {
         return {
-            searching: false,
+            id: UniqueComponentId(),
             focused: false,
+            focusedOptionIndex: -1,
+            focusedMultipleOptionIndex: -1,
             overlayVisible: false,
-            inputTextValue: null,
-            highlightItem: null
-        };
+            searching: false
+        }
     },
     watch: {
         suggestions() {
             if (this.searching) {
-                if (this.suggestions && this.suggestions.length)
-                    this.showOverlay();
-                else
-                    this.hideOverlay();
-
+                ObjectUtils.isNotEmpty(this.suggestions) ? this.show() : this.hide();
+                this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
                 this.searching = false;
             }
+
+            this.autoUpdateModel();
+        }
+    },
+    mounted() {
+        this.id = this.$attrs.id || this.id;
+
+        this.autoUpdateModel();
+    },
+    updated() {
+        if (this.overlayVisible) {
+            this.alignOverlay();
         }
     },
     beforeUnmount() {
@@ -170,20 +240,24 @@ export default {
             this.overlay = null;
         }
     },
-    updated() {
-        if (this.overlayVisible) {
-            this.alignOverlay();
-        }
-    },
     methods: {
         getOptionIndex(index, fn) {
             return this.virtualScrollerDisabled ? index : (fn && fn(index)['index']);
         },
-        getOptionRenderKey(option) {
-            return this.getItemContent(option);
+        getOptionLabel(option) {
+            return this.field || this.optionLabel ? ObjectUtils.resolveFieldData(option, this.field || this.optionLabel) : option;
         },
-        getOptionGroupRenderKey(optionGroup) {
-            return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
+        getOptionValue(option) {
+            return option; // TODO: The 'optionValue' properties can be added.
+        },
+        getOptionRenderKey(option, index) {
+            return (this.dataKey ? ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
+        },
+        isOptionDisabled(option) {
+            return this.optionDisabled ? ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
+        },
+        isOptionGroup(option) {
+            return this.optionGroupLabel && option.optionGroup && option.group;
         },
         getOptionGroupLabel(optionGroup) {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupLabel);
@@ -191,28 +265,393 @@ export default {
         getOptionGroupChildren(optionGroup) {
             return ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren);
         },
+        getAriaPosInset(index) {
+            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter(option => this.isOptionGroup(option)).length : index) + 1;
+        },
+        show(isFocus) {
+            this.$emit('before-show');
+            this.overlayVisible = true;
+            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1);
+
+            isFocus && this.$refs.focusInput.focus();
+        },
+        hide(isFocus) {
+            const _hide = () => {
+                this.$emit('before-hide');
+                this.overlayVisible = false;
+                this.focusedOptionIndex = -1;
+
+                isFocus && this.$refs.focusInput.focus();
+            }
+
+            setTimeout(() => { _hide() }, 0); // For ScreenReaders
+        },
+        onFocus(event) {
+            this.focused = true;
+            this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+            this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.focused = false;
+            this.focusedOptionIndex = -1;
+            this.$emit('blur', event);
+        },
+        onKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowDown':
+                    this.onArrowDownKey(event);
+                    break;
+
+                case 'ArrowUp':
+                    this.onArrowUpKey(event);
+                    break;
+
+                case 'ArrowLeft':
+                    this.onArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                    this.onEnterKey(event);
+                    break;
+
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+
+                case 'Tab':
+                    this.onTabKey(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKey(event);
+                    break;
+
+                case 'ShiftLeft':
+                case 'ShiftRight':
+                    //NOOP
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onInput(event) {
+            if (this.searchTimeout) {
+                clearTimeout(this.searchTimeout);
+            }
+
+            let query = event.target.value;
+            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 {
+                    this.hide();
+                }
+            }
+        },
+        onChange(event) {
+            if (this.forceSelection) {
+                let valid = false;
+
+                if (this.visibleOptions)  {
+                    const matchedValue = this.visibleOptions.find(option => this.isOptionMatched(option, event.target.value));
+
+                    if (matchedValue !== undefined) {
+                        valid = true;
+                        !this.isSelected(matchedValue) && this.onOptionSelect(event, matchedValue);
+                    }
+                }
+
+                if (!valid) {
+                    this.$refs.focusInput.value = '';
+                    this.$emit('clear');
+                    !this.multiple && this.updateModel(event, null);
+                }
+            }
+        },
+        onMultipleContainerFocus() {
+            this.focused = true;
+        },
+        onMultipleContainerBlur() {
+            this.focusedMultipleOptionIndex = -1;
+            this.focused = false;
+        },
+        onMultipleContainerKeyDown(event) {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    this.onArrowLeftKeyOnMultiple(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onArrowRightKeyOnMultiple(event);
+                    break;
+
+                case 'Backspace':
+                    this.onBackspaceKeyOnMultiple(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onContainerClick(event) {
+            if (this.disabled || this.searching) {
+                return;
+            }
+
+            if (this.isDropdownClicked(event) || event.target.tagName === 'INPUT') {
+                return;
+            }
+            else if (!this.overlay || !this.overlay.contains(event.target)) {
+                if (this.completeOnFocus) {
+                    this.search(event, '', 'click');
+                }
+
+                this.$refs.focusInput.focus();
+            }
+        },
+        onDropdownClick(event) {
+            let query = undefined;
+
+            if (this.overlayVisible) {
+                this.hide(true);
+            }
+            else {
+                this.$refs.focusInput.focus();
+                query = this.$refs.focusInput.value;
+
+                if (this.dropdownMode === 'blank')
+                    this.search(event, '', 'dropdown');
+                else if (this.dropdownMode === 'current')
+                    this.search(event, query, 'dropdown');
+            }
+
+            this.$emit('dropdown-click', { originalEvent: event, query });
+        },
+        onOptionSelect(event, option) {
+            const value = this.getOptionValue(option);
+
+            if (this.multiple) {
+                this.$refs.focusInput.value = '';
+
+                if (!this.isSelected(option)) {
+                    this.updateModel(event, [...(this.modelValue || []), value]);
+                }
+            }
+            else {
+                this.updateModel(event, value);
+            }
+
+            this.$emit('item-select', { originalEvent: event, value: option });
+
+            this.hide(true);
+        },
+        onOptionMouseMove(event, index) {
+            if (this.focusOnHover) {
+                this.changeFocusedOptionIndex(event, index);
+            }
+        },
+        onOverlayClick(event) {
+            OverlayEventBus.emit('overlay-click', {
+                originalEvent: event,
+                target: this.$el
+            });
+        },
+        onOverlayKeyDown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    this.onEscapeKey(event);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onArrowDownKey(event) {
+            if (!this.overlayVisible) {
+                return;
+            }
+
+            const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.findFirstFocusedOptionIndex();
+
+            this.changeFocusedOptionIndex(event, optionIndex);
+
+            event.preventDefault();
+        },
+        onArrowUpKey(event) {
+            if (!this.overlayVisible) {
+                return;
+            }
+
+            if (event.altKey) {
+                if (this.focusedOptionIndex !== -1) {
+                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                }
+
+                this.overlayVisible && this.hide();
+                event.preventDefault();
+            }
+            else {
+                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.findLastFocusedOptionIndex();
+
+                this.changeFocusedOptionIndex(event, optionIndex);
+
+                event.preventDefault();
+            }
+        },
+        onArrowLeftKey(event) {
+            const target = event.currentTarget;
+            this.focusedOptionIndex = -1;
+
+            if (this.multiple) {
+                if (ObjectUtils.isEmpty(target.value) && this.hasSelectedOption) {
+                    this.$refs.multiContainer.focus();
+                    this.focusedMultipleOptionIndex = this.modelValue.length;
+                }
+                else {
+                    event.stopPropagation(); // To prevent onArrowLeftKeyOnMultiple method
+                }
+            }
+        },
+        onArrowRightKey(event) {
+            this.focusedOptionIndex = -1;
+
+            this.multiple && event.stopPropagation(); // To prevent onArrowRightKeyOnMultiple method
+        },
+        onHomeKey(event) {
+            event.currentTarget.setSelectionRange(0, 0);
+            this.focusedOptionIndex = -1;
+
+            event.preventDefault();
+        },
+        onEndKey(event) {
+            const target = event.currentTarget;
+            const len = target.value.length;
+            target.setSelectionRange(len, len);
+            this.focusedOptionIndex = -1;
+
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView(0);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView(this.visibleOptions.length - 1);
+            event.preventDefault();
+        },
+        onEnterKey(event) {
+            if (!this.overlayVisible) {
+                this.onArrowDownKey(event);
+            }
+            else {
+                if (this.focusedOptionIndex !== -1) {
+                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+                }
+
+                this.hide();
+            }
+
+            event.preventDefault();
+        },
+        onEscapeKey(event) {
+            this.overlayVisible && this.hide(true);
+            event.preventDefault();
+        },
+        onTabKey(event) {
+            if (this.focusedOptionIndex !== -1) {
+                this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);
+            }
+
+            this.overlayVisible && this.hide();
+        },
+        onBackspaceKey(event) {
+            if (this.multiple) {
+                if (ObjectUtils.isNotEmpty(this.modelValue) && !this.$refs.focusInput.value) {
+                    const removedValue = this.modelValue[this.modelValue.length - 1];
+                    const newValue = this.modelValue.slice(0, -1);
+
+                    this.$emit('update:modelValue', newValue);
+                    this.$emit('item-unselect', { originalEvent: event, value: removedValue });
+                }
+
+                event.stopPropagation(); // To prevent onBackspaceKeyOnMultiple method
+            }
+        },
+        onArrowLeftKeyOnMultiple() {
+            this.focusedMultipleOptionIndex = this.focusedMultipleOptionIndex < 1 ? 0 : this.focusedMultipleOptionIndex - 1;
+        },
+        onArrowRightKeyOnMultiple() {
+            this.focusedMultipleOptionIndex++;
+
+            if (this.focusedMultipleOptionIndex > (this.modelValue.length - 1)) {
+                this.focusedMultipleOptionIndex = -1;
+                this.$refs.focusInput.focus();
+            }
+        },
+        onBackspaceKeyOnMultiple(event) {
+            if (this.focusedMultipleOptionIndex !== -1) {
+                this.removeOption(event, this.focusedMultipleOptionIndex);
+            }
+        },
         onOverlayEnter(el) {
             ZIndexUtils.set('overlay', el, this.$primevue.config.zIndex.overlay);
             this.alignOverlay();
+        },
+        onOverlayAfterEnter() {
             this.bindOutsideClickListener();
             this.bindScrollListener();
             this.bindResizeListener();
 
-            if (this.autoHighlight && this.suggestions && this.suggestions.length) {
-                DomHandler.addClass(this.list.firstElementChild, 'p-highlight');
-            }
+            this.$emit('show');
         },
         onOverlayLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
+
+            this.$emit('hide');
             this.overlay = null;
         },
         onOverlayAfterLeave(el) {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            let target = this.multiple ? this.$refs.multiContainer : this.$refs.input;
+            let target = this.multiple ? this.$refs.multiContainer : this.$refs.focusInput;
             if (this.appendTo === 'self') {
                 DomHandler.relativePosition(this.overlay, target);
             }
@@ -225,17 +664,23 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     if (this.overlayVisible && this.overlay && this.isOutsideClicked(event)) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 };
                 document.addEventListener('click', this.outsideClickListener);
             }
         },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('click', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
         bindScrollListener() {
             if (!this.scrollHandler) {
                 this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
                     if (this.overlayVisible) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 });
             }
@@ -251,7 +696,7 @@ export default {
             if (!this.resizeListener) {
                 this.resizeListener = () => {
                     if (this.overlayVisible && !DomHandler.isTouchDevice()) {
-                        this.hideOverlay();
+                        this.hide();
                     }
                 };
                 window.addEventListener('resize', this.resizeListener);
@@ -270,79 +715,47 @@ export default {
             if (this.multiple)
                 return event.target === this.$refs.multiContainer || this.$refs.multiContainer.contains(event.target);
             else
-                return event.target === this.$refs.input;
+                return event.target === this.$refs.focusInput;
         },
         isDropdownClicked(event) {
             return this.$refs.dropdownButton ? (event.target === this.$refs.dropdownButton || this.$refs.dropdownButton.$el.contains(event.target)) : false;
         },
-        unbindOutsideClickListener() {
-            if (this.outsideClickListener) {
-                document.removeEventListener('click', this.outsideClickListener);
-                this.outsideClickListener = null;
-            }
+        isOptionMatched(option, value) {
+            return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.searchLocale) === value.toLocaleLowerCase(this.searchLocale);
         },
-        selectItem(event, item) {
-            if (this.multiple) {
-                this.$refs.input.value = '';
-                this.inputTextValue = '';
-
-                if (!this.isSelected(item)) {
-                    let newValue = this.modelValue ? [...this.modelValue, item] : [item];
-                    this.$emit('update:modelValue', newValue);
-                }
-            }
-            else {
-                this.$emit('update:modelValue', item);
-            }
-
-            this.$emit('item-select', {
-                originalEvent: event,
-                value: item
-            });
-
-            this.focus();
-            this.hideOverlay();
+        isValidOption(option) {
+            return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
         },
-        onMultiContainerClick(event) {
-            this.focus();
-            if(this.completeOnFocus) {
-                this.search(event, '', 'click');
-            }
+        isValidSelectedOption(option) {
+            return this.isValidOption(option) && this.isSelected(option);
         },
-        removeItem(event, index) {
-            let removedValue = this.modelValue[index];
-            let newValue = this.modelValue.filter((val, i) => (index !== i));
-            this.$emit('update:modelValue', newValue);
-            this.$emit('item-unselect', {
-                originalEvent: event,
-                value: removedValue
-            });
+        isSelected(option) {
+            return ObjectUtils.equals(this.modelValue, this.getOptionValue(option), this.equalityKey);
         },
-        onDropdownClick(event) {
-            this.focus();
-            const query = this.$refs.input.value;
-
-            if (this.dropdownMode === 'blank')
-                this.search(event, '', 'dropdown');
-            else if (this.dropdownMode === 'current')
-                this.search(event, query, 'dropdown');
-
-            this.$emit('dropdown-click', {
-                originalEvent: event,
-                query: query
-            });
+        findFirstOptionIndex() {
+            return this.visibleOptions.findIndex(option => this.isValidOption(option));
         },
-        getItemContent(item) {
-            return this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
+        findLastOptionIndex() {
+            return this.visibleOptions.findLastIndex(option => this.isValidOption(option));
         },
-        showOverlay() {
-            this.overlayVisible = true;
+        findNextOptionIndex(index) {
+            const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(option => this.isValidOption(option)) : -1;
+            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
         },
-        hideOverlay() {
-            this.overlayVisible = false;
+        findPrevOptionIndex(index) {
+            const matchedOptionIndex = index > 0 ? this.visibleOptions.slice(0, index).findLastIndex(option => this.isValidOption(option)) : -1;
+            return matchedOptionIndex > -1 ? matchedOptionIndex : index;
         },
-        focus() {
-            this.$refs.input.focus();
+        findSelectedOptionIndex() {
+            return this.hasSelectedOption ? this.visibleOptions.findIndex(option => this.isValidSelectedOption(option)) : -1;
+        },
+        findFirstFocusedOptionIndex() {
+            const selectedIndex = this.findSelectedOptionIndex();
+            return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
+        },
+        findLastFocusedOptionIndex() {
+            const selectedIndex = this.findSelectedOptionIndex();
+            return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
         },
         search(event, query, source) {
             //allow empty string but not undefined or null
@@ -356,248 +769,92 @@ export default {
             }
 
             this.searching = true;
-            this.$emit('complete', {
-                originalEvent: event,
-                query: query
-            });
-        },
-        onInputClicked(event) {
-            if(this.completeOnFocus) {
-                this.search(event, '', 'click');
-            }
+            this.$emit('complete', { originalEvent: event, query });
         },
-        onInput(event) {
-            this.inputTextValue = event.target.value;
-
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-            }
+        removeOption(event, index) {
+            const removedOption = this.modelValue[index];
+            const value = this.modelValue.filter((_, i) => i !== index).map(option => this.getOptionValue(option));
 
-            let query = event.target.value;
-            if (!this.multiple) {
-                this.$emit('update:modelValue', query);
-            }
-
-            if (query.length === 0) {
-                this.hideOverlay();
-                this.$emit('clear');
-            }
-            else {
-                if (query.length >= this.minLength) {
-                    this.timeout = setTimeout(() => {
-                        this.search(event, query, 'input');
-                    }, this.delay);
-                }
-                else {
-                    this.hideOverlay();
-                }
-            }
-        },
-        onFocus() {
-            this.focused = true;
+            this.updateModel(event, value);
+            this.$emit('item-unselect', { originalEvent: event, value: removedOption });
+            this.$refs.focusInput.focus();
         },
-        onBlur() {
-            this.focused = false;
-        },
-        onKeyDown(event) {
-            if (this.overlayVisible) {
-                let highlightItem = DomHandler.findSingle(this.list, 'li.p-highlight');
-
-                switch(event.which) {
-                    //down
-                    case 40:
-                        if (highlightItem) {
-                            let nextElement = this.findNextItem(highlightItem);
-                            if (nextElement) {
-                                DomHandler.addClass(nextElement, 'p-highlight');
-                                DomHandler.removeClass(highlightItem, 'p-highlight');
-                                nextElement.scrollIntoView({ block: 'nearest', inline: 'start' });
-                            }
-                        }
-                        else {
-                            highlightItem = this.list.firstElementChild;
-                            if (DomHandler.hasClass(highlightItem, 'p-autocomplete-item-group')) {
-                                highlightItem = this.findNextItem(highlightItem);
-                            }
-
-                            if (highlightItem) {
-                                DomHandler.addClass(highlightItem, 'p-highlight');
-                            }
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //up
-                    case 38:
-                        if (highlightItem) {
-                            let previousElement = this.findPrevItem(highlightItem);
-                            if (previousElement) {
-                                DomHandler.addClass(previousElement, 'p-highlight');
-                                DomHandler.removeClass(highlightItem, 'p-highlight');
-                                previousElement.scrollIntoView({ block: 'nearest', inline: 'start' });
-                            }
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //enter
-                    case 13:
-                        if (highlightItem) {
-                            this.selectHighlightItem(event, highlightItem);
-                            this.hideOverlay();
-                        }
-
-                        event.preventDefault();
-                    break;
-
-                    //escape
-                    case 27:
-                        this.hideOverlay();
-                        event.preventDefault();
-                    break;
-
-                    //tab
-                    case 9:
-                        if (highlightItem) {
-                            this.selectHighlightItem(event, highlightItem);
-                        }
-
-                        this.hideOverlay();
-                    break;
-
-                    default:
-                    break;
-                }
-            }
-
-            if (this.multiple) {
-                switch(event.which) {
-                    //backspace
-                    case 8:
-                        if (this.modelValue && this.modelValue.length && !this.$refs.input.value) {
-                            let removedValue = this.modelValue[this.modelValue.length - 1];
-                            let newValue = this.modelValue.slice(0, -1);
-
-                            this.$emit('update:modelValue', newValue);
-                            this.$emit('item-unselect', {
-                                originalEvent: event,
-                                value: removedValue
-                            });
-                        }
-                    break;
+        changeFocusedOptionIndex(event, index) {
+            if (this.focusedOptionIndex !== index) {
+                this.focusedOptionIndex = index;
+                this.scrollInView();
 
-                    default:
-                    break;
+                if (this.selectOnFocus || this.autoHighlight) {
+                    this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
                 }
             }
         },
-        selectHighlightItem(event, item) {
-            if (this.optionGroupLabel) {
-                let optionGroup = this.suggestions[item.dataset.group];
-                this.selectItem(event, this.getOptionGroupChildren(optionGroup)[item.dataset.index]);
+        scrollInView(index = -1) {
+            const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+            const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
             }
-            else {
-                this.selectItem(event, this.suggestions[item.dataset.index]);
+            else if (!this.virtualScrollerDisabled) {
+                setTimeout(() => {
+                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);
+                }, 0);
             }
         },
-        findNextItem(item) {
-            let nextItem = item.nextElementSibling;
-
-            if (nextItem)
-                return DomHandler.hasClass(nextItem, 'p-autocomplete-item-group') ? this.findNextItem(nextItem) : nextItem;
-            else
-                return null;
+        autoUpdateModel() {
+            if ((this.selectOnFocus || this.autoHighlight) && this.autoOptionFocus && !this.hasSelectedOption) {
+                this.focusedOptionIndex = this.findFirstFocusedOptionIndex();
+                const value = this.getOptionValue(this.visibleOptions[this.focusedOptionIndex]);
+                this.updateModel(null, this.multiple ? [value] : value);
+            }
         },
-        findPrevItem(item) {
-            let prevItem = item.previousElementSibling;
-
-            if (prevItem)
-                return DomHandler.hasClass(prevItem, 'p-autocomplete-item-group') ? this.findPrevItem(prevItem) : prevItem;
-            else
-                return null;
+        updateModel(event, value) {
+            this.$emit('update:modelValue', value);
+            this.$emit('change', { originalEvent: event, value });
         },
-        onChange(event) {
-            if (this.forceSelection) {
-                let valid = false;
-                let inputValue = event.target.value.trim();
-
-                if (this.suggestions)  {
-                    for (let item of this.suggestions) {
-                        let itemValue = this.field ? ObjectUtils.resolveFieldData(item, this.field) : item;
-                        if (itemValue && inputValue === itemValue.trim()) {
-                            valid = true;
-                            this.selectItem(event, item);
-                            break;
-                        }
-                    }
-                }
+        flatOptions(options) {
+            return (options || []).reduce((result, option, index) => {
+                result.push({ optionGroup: option, group: true, index });
 
-                if (!valid) {
-                    this.$refs.input.value = '';
-                    this.inputTextValue = '';
-                    this.$emit('clear');
-                    if (!this.multiple) {
-                        this.$emit('update:modelValue', null);
-                    }
-                }
-            }
-        },
-        isSelected(val) {
-            let selected = false;
-            if (this.modelValue && this.modelValue.length) {
-                for (let i = 0; i < this.modelValue.length; i++) {
-                    if (ObjectUtils.equals(this.modelValue[i], val)) {
-                        selected = true;
-                        break;
-                    }
-                }
-            }
+                const optionGroupChildren = this.getOptionGroupChildren(option);
+                optionGroupChildren && optionGroupChildren.forEach(o => result.push(o));
 
-            return selected;
+                return result;
+            }, []);
         },
         overlayRef(el) {
             this.overlay = el;
         },
         listRef(el, contentRef) {
             this.list = el;
-            contentRef && contentRef(el); // for virtualScroller
+            contentRef && contentRef(el); // For VirtualScroller
         },
         virtualScrollerRef(el) {
             this.virtualScroller = el;
-        },
-        onOverlayClick(event) {
-            OverlayEventBus.emit('overlay-click', {
-                originalEvent: event,
-                target: this.$el
-            });
         }
     },
     computed: {
         containerClass() {
-            return ['p-autocomplete p-component p-inputwrapper', this.class, {
+            return ['p-autocomplete p-component p-inputwrapper', {
+                'p-disabled': this.disabled,
+                'p-focus': this.focused,
                 'p-autocomplete-dd': this.dropdown,
                 'p-autocomplete-multiple': this.multiple,
-                'p-inputwrapper-filled': ((this.modelValue) || (this.inputTextValue && this.inputTextValue.length)),
-                'p-inputwrapper-focus': this.focused
+                'p-inputwrapper-filled': this.modelValue || ObjectUtils.isNotEmpty(this.inputValue),
+                'p-inputwrapper-focus': this.focused,
+                'p-overlay-open': this.overlayVisible
             }];
         },
-        inputFieldClass() {
+        inputStyleClass() {
             return ['p-autocomplete-input p-inputtext p-component', this.inputClass, {
-                'p-autocomplete-dd-input': this.dropdown,
-                'p-disabled': this.$attrs.disabled
+                'p-autocomplete-dd-input': this.dropdown
             }];
         },
         multiContainerClass() {
-            return ['p-autocomplete-multiple-container p-component p-inputtext', {
-                'p-disabled': this.$attrs.disabled,
-                'p-focus': this.focused
-            }];
+            return ['p-autocomplete-multiple-container p-component p-inputtext'];
         },
         panelStyleClass() {
-            return [
-                'p-autocomplete-panel p-component', this.panelClass, {
+            return ['p-autocomplete-panel p-component', this.panelClass, {
                 'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
@@ -605,21 +862,55 @@ export default {
         loadingIconClass() {
             return ['p-autocomplete-loader pi-spin', this.loadingIcon];
         },
+        visibleOptions() {
+            return this.optionGroupLabel ? this.flatOptions(this.suggestions) : (this.suggestions || []);
+        },
         inputValue() {
             if (this.modelValue) {
-                if (this.field && typeof this.modelValue === 'object') {
-                    const resolvedFieldData = ObjectUtils.resolveFieldData(this.modelValue, this.field);
-                    return resolvedFieldData != null ? resolvedFieldData : this.modelValue;
+                if (typeof this.modelValue === 'object') {
+                    const label = this.getOptionLabel(this.modelValue);
+                    return label != null ? label : this.modelValue;
                 }
-                else
+                else {
                     return this.modelValue;
+                }
             }
             else {
                 return '';
             }
         },
-        listId() {
-            return UniqueComponentId() + '_list';
+        hasSelectedOption() {
+            return ObjectUtils.isNotEmpty(this.modelValue);
+        },
+        equalityKey() {
+            return this.dataKey; // TODO: The 'optionValue' properties can be added.
+        },
+        searchResultMessageText() {
+            return ObjectUtils.isNotEmpty(this.visibleOptions) && this.overlayVisible ? this.searchMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptySearchMessageText;
+        },
+        searchMessageText() {
+            return this.searchMessage || this.$primevue.config.locale.searchMessage;
+        },
+        emptySearchMessageText() {
+            return this.emptySearchMessage || this.$primevue.config.locale.emptySearchMessage;
+        },
+        selectionMessageText() {
+            return this.selectionMessage || this.$primevue.config.locale.selectionMessage;
+        },
+        emptySelectionMessageText() {
+            return this.emptySelectionMessage || this.$primevue.config.locale.emptySelectionMessage;
+        },
+        selectedMessageText() {
+            return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
+        },
+        focusedOptionId() {
+            return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
+        },
+        focusedMultipleOptionId() {
+            return this.focusedMultipleOptionIndex !== -1 ? `${this.id}_multiple_option_${this.focusedMultipleOptionIndex}` : null;
+        },
+        ariaSetSize() {
+            return this.visibleOptions.filter(option => !this.isOptionGroup(option)).length;
         },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;