primeng 16.6.0 → 16.7.1

package/fesm2022/primeng-dropdown.mjs

@@ -1,7 +1,7 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, EventEmitter, Component, Input, Output, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
+import { forwardRef, EventEmitter, Component, Input, Output, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, ViewChild, ContentChildren, NgModule } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i3 from 'primeng/api';
 import { TranslationKeys, PrimeTemplate, SharedModule } from 'primeng/api';
@@ -27,31 +27,43 @@ const DROPDOWN_VALUE_ACCESSOR = {
     multi: true
 };
 class DropdownItem {
+    id;
     option;
     selected;
+    focused;
     label;
     disabled;
     visible;
     itemSize;
+    ariaPosInset;
+    ariaSetSize;
     template;
     onClick = new EventEmitter();
+    onMouseEnter = new EventEmitter();
+    ngOnInit() { }
     onOptionClick(event) {
-        this.onClick.emit({
-            originalEvent: event,
-            option: this.option
-        });
+        this.onClick.emit(event);
+    }
+    onOptionMouseEnter(event) {
+        this.onMouseEnter.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: DropdownItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: DropdownItem, selector: "p-dropdownItem", inputs: { option: "option", selected: "selected", label: "label", disabled: "disabled", visible: "visible", itemSize: "itemSize", template: "template" }, outputs: { onClick: "onClick" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: DropdownItem, selector: "p-dropdownItem", inputs: { id: "id", option: "option", selected: "selected", focused: "focused", label: "label", disabled: "disabled", visible: "visible", itemSize: "itemSize", ariaPosInset: "ariaPosInset", ariaSetSize: "ariaSetSize", template: "template" }, outputs: { onClick: "onClick", onMouseEnter: "onMouseEnter" }, host: { classAttribute: "p-element" }, ngImport: i0, template: `
         <li
+            [id]="id"
             (click)="onOptionClick($event)"
+            (mouseenter)="onOptionMouseEnter($event)"
             role="option"
             pRipple
             [attr.aria-label]="label"
+            [attr.aria-setsize]="ariaSetSize"
+            [attr.aria-posinset]="ariaPosInset"
             [attr.aria-selected]="selected"
+            [attr.data-p-focused]="focused"
+            [attr.data-p-highlight]="selected"
+            [attr.data-p-disabled]="disabled"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [id]="selected ? 'p-highlighted-option' : ''"
-            [ngClass]="{ 'p-dropdown-item': true, 'p-highlight': selected, 'p-disabled': disabled }"
+            [ngClass]="{ 'p-dropdown-item': true, 'p-highlight': selected, 'p-disabled': disabled, 'p-focus': focused }"
         >
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
@@ -64,14 +76,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                     selector: 'p-dropdownItem',
                     template: `
         <li
+            [id]="id"
             (click)="onOptionClick($event)"
+            (mouseenter)="onOptionMouseEnter($event)"
             role="option"
             pRipple
             [attr.aria-label]="label"
+            [attr.aria-setsize]="ariaSetSize"
+            [attr.aria-posinset]="ariaPosInset"
             [attr.aria-selected]="selected"
+            [attr.data-p-focused]="focused"
+            [attr.data-p-highlight]="selected"
+            [attr.data-p-disabled]="disabled"
             [ngStyle]="{ height: itemSize + 'px' }"
-            [id]="selected ? 'p-highlighted-option' : ''"
-            [ngClass]="{ 'p-dropdown-item': true, 'p-highlight': selected, 'p-disabled': disabled }"
+            [ngClass]="{ 'p-dropdown-item': true, 'p-highlight': selected, 'p-disabled': disabled, 'p-focus': focused }"
         >
             <span *ngIf="!template">{{ label ?? 'empty' }}</span>
             <ng-container *ngTemplateOutlet="template; context: { $implicit: option }"></ng-container>
@@ -81,10 +99,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         class: 'p-element'
                     }
                 }]
-        }], propDecorators: { option: [{
+        }], propDecorators: { id: [{
+                type: Input
+            }], option: [{
                 type: Input
             }], selected: [{
                 type: Input
+            }], focused: [{
+                type: Input
             }], label: [{
                 type: Input
             }], disabled: [{
@@ -93,10 +115,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], itemSize: [{
                 type: Input
+            }], ariaPosInset: [{
+                type: Input
+            }], ariaSetSize: [{
+                type: Input
             }], template: [{
                 type: Input
             }], onClick: [{
                 type: Output
+            }], onMouseEnter: [{
+                type: Output
             }] } });
 /**
  * Dropdown also known as Select, is used to choose an item from a collection of options.
@@ -109,6 +137,11 @@ class Dropdown {
     zone;
     filterService;
     config;
+    /**
+     * Unique identifier of the component
+     * @group Props
+     */
+    id;
     /**
      * Height of the viewport in pixels, a scrollbar is defined if height of list exceeds this value.
      * @group Props
@@ -168,7 +201,7 @@ class Dropdown {
      * Index of the element in tabbing order.
      * @group Props
      */
-    tabindex;
+    tabindex = 0;
     /**
      * Default text to display when no option is selected.
      * @group Props
@@ -199,6 +232,11 @@ class Dropdown {
      * @group Props
      */
     filterBy;
+    /**
+     * Fields used when filtering the options, defaults to optionLabel.
+     * @group Props
+     */
+    filterFields;
     /**
      * When present, it specifies that the component should automatically get focus on load.
      * @group Props
@@ -233,7 +271,7 @@ class Dropdown {
      * Name of the label field of an option group.
      * @group Props
      */
-    optionGroupLabel;
+    optionGroupLabel = 'label';
     /**
      * Name of the options field of an option group.
      * @group Props
@@ -334,6 +372,21 @@ class Dropdown {
      * @group Props
      */
     tooltipStyleClass;
+    /**
+     * Fields used when filtering the options, defaults to optionLabel.
+     * @group Props
+     */
+    focusOnHover = false;
+    /**
+     * Determines if the option will be selected on focus.
+     * @group Props
+     */
+    selectOnFocus = false;
+    /**
+     * Whether to focus on the first visible or selected element when the overlay panel is shown.
+     * @group Props
+     */
+    autoOptionFocus = true;
     /**
      * Applies focus to the filter element when the overlay is shown.
      * @group Props
@@ -427,32 +480,21 @@ class Dropdown {
      * @group Props
      */
     get filterValue() {
-        return this._filterValue;
+        return this._filterValue();
     }
     set filterValue(val) {
-        this._filterValue = val;
-        this.activateFilter();
+        this._filterValue.set(val);
     }
     /**
      * An array of objects to display as the available options.
      * @group Props
      */
     get options() {
-        return this._options;
+        const options = this._options();
+        return options;
     }
     set options(val) {
-        this._options = val;
-        this.optionsToDisplay = this._options;
-        this.updateSelectedOption(this.value);
-        this.selectedOption = this.findOption(this.value, this.optionsToDisplay);
-        if (!this.selectedOption && ObjectUtils.isNotEmpty(this.value) && !this.editable) {
-            this.value = null;
-            this.onModelChange(this.value);
-        }
-        this.optionsChanged = true;
-        if (this._filterValue && this._filterValue.length) {
-            this.activateFilter();
-        }
+        this._options.set(val);
     }
     /**
      * Callback to invoke when value of dropdown changes.
@@ -510,11 +552,12 @@ class Dropdown {
     onLazyLoad = new EventEmitter();
     containerViewChild;
     filterViewChild;
-    accessibleViewChild;
+    focusInputViewChild;
     editableInputViewChild;
     itemsViewChild;
     scroller;
     overlayViewChild;
+    firstHiddenFocusableElementOnOverlay;
     templates;
     _disabled;
     itemsWrapper;
@@ -531,12 +574,11 @@ class Dropdown {
     clearIconTemplate;
     filterIconTemplate;
     filterOptions;
-    selectedOption;
-    _options;
+    _options = signal(null);
+    modelValue = signal(null);
     value;
     onModelChange = () => { };
     onModelTouched = () => { };
-    optionsToDisplay;
     hover;
     focused;
     overlayVisible;
@@ -545,16 +587,81 @@ class Dropdown {
     dimensionsUpdated;
     hoveredItem;
     selectedOptionUpdated;
-    _filterValue;
+    _filterValue = signal(null);
     searchValue;
     searchIndex;
     searchTimeout;
     previousSearchChar;
     currentSearchChar;
     preventModelTouched;
-    id = UniqueComponentId();
+    focusedOptionIndex = signal(-1);
     labelId;
     listId;
+    get emptyMessageLabel() {
+        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+    get emptyFilterMessageLabel() {
+        return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
+    }
+    get filled() {
+        if (typeof this.modelValue() === 'string')
+            return !!this.modelValue();
+        return this.modelValue() || this.modelValue() != null || this.modelValue() != undefined;
+    }
+    get isVisibleClearIcon() {
+        return this.modelValue() != null && ObjectUtils.isNotEmpty(this.modelValue()) && this.modelValue() !== '' && this.showClear && !this.disabled;
+    }
+    get containerClass() {
+        return {
+            'p-dropdown p-component p-inputwrapper': true,
+            'p-disabled': this.disabled,
+            'p-dropdown-clearable': this.showClear && !this.disabled,
+            'p-focus': this.focused,
+            'p-inputwrapper-filled': this.modelValue(),
+            'p-inputwrapper-focus': this.focused || this.overlayVisible
+        };
+    }
+    get inputClass() {
+        const label = this.label();
+        return {
+            'p-dropdown-label p-inputtext': true,
+            'p-placeholder': this.placeholder && label === this.placeholder,
+            'p-dropdown-label-empty': !this.editable && !this.selectedItemTemplate && (!label || label === 'p-emptylabel' || label.length === 0)
+        };
+    }
+    get panelClass() {
+        return {
+            'p-dropdown-panel p-component': true,
+            'p-input-filled': this.config.inputStyle === 'filled',
+            'p-ripple-disabled': this.config.ripple === false
+        };
+    }
+    visibleOptions = computed(() => {
+        const options = this.group ? this.flatOptions(this.options) : this.options || [];
+        if (this._filterValue()) {
+            const filteredOptions = !this.filterBy && !this.filterFields && !this.optionValue
+                ? this.options.filter((option) => option.toLowerCase().indexOf(this._filterValue().toLowerCase()) !== -1)
+                : this.filterService.filter(options, this.searchFields(), this._filterValue(), this.filterMatchMode, this.filterLocale);
+            if (this.group) {
+                const optionGroups = this.options || [];
+                const filtered = [];
+                optionGroups.forEach((group) => {
+                    const groupChildren = this.getOptionGroupChildren(group);
+                    const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));
+                    if (filteredItems.length > 0)
+                        filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });
+                });
+                return this.flatOptions(filtered);
+            }
+            return filteredOptions;
+        }
+        return options;
+    });
+    label = computed(() => {
+        let selectedOptionIndex;
+        this.autoDisplayFirst ? (!this.modelValue() ? (selectedOptionIndex = -1) : (selectedOptionIndex = this.findFirstOptionIndex())) : (selectedOptionIndex = this.findSelectedOptionIndex());
+        return this.modelValue() ? this.getOptionLabel(this.modelValue()) : selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions()[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';
+    });
     constructor(el, renderer, cd, zone, filterService, config) {
         this.el = el;
         this.renderer = renderer;
@@ -562,6 +669,41 @@ class Dropdown {
         this.zone = zone;
         this.filterService = filterService;
         this.config = config;
+        effect(() => {
+            const modelValue = this.modelValue();
+            if (modelValue && this.editable) {
+                this.updateEditableLabel();
+            }
+        });
+    }
+    ngOnInit() {
+        this.id = this.id || UniqueComponentId();
+        this.autoUpdateModel();
+        if (this.filterBy) {
+            this.filterOptions = {
+                filter: (value) => this.onFilterInputChange(value),
+                reset: () => this.resetFilter()
+            };
+        }
+    }
+    ngAfterViewChecked() {
+        if (this.optionsChanged && this.overlayVisible) {
+            this.optionsChanged = false;
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    if (this.overlayViewChild) {
+                        this.overlayViewChild.alignOverlay();
+                    }
+                }, 1);
+            });
+        }
+        if (this.selectedOptionUpdated && this.itemsWrapper) {
+            let selectedItem = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight');
+            if (selectedItem) {
+                DomHandler.scrollInView(this.itemsWrapper, selectedItem);
+            }
+            this.selectedOptionUpdated = false;
+        }
     }
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -608,48 +750,63 @@ class Dropdown {
             }
         });
     }
-    ngOnInit() {
-        this.optionsToDisplay = this.options;
-        this.updateSelectedOption(null);
-        this.labelId = this.id + '_label';
-        this.listId = this.id + '_list';
-        if (this.filterBy) {
-            this.filterOptions = {
-                filter: (value) => this.onFilterInputChange(value),
-                reset: () => this.resetFilter()
-            };
+    flatOptions(options) {
+        return (options || []).reduce((result, option, index) => {
+            result.push({ optionGroup: option, group: true, index });
+            const optionGroupChildren = this.getOptionGroupChildren(option);
+            optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));
+            return result;
+        }, []);
+    }
+    autoUpdateModel() {
+        if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption()) {
+            this.focusedOptionIndex.set(this.findFirstFocusedOptionIndex());
+            this.onOptionSelect(null, this.visibleOptions()[this.focusedOptionIndex()], false);
         }
-    }
-    ngAfterViewInit() {
-        if (this.editable) {
-            this.updateEditableLabel();
+        if (this.autoDisplayFirst && !this.modelValue()) {
+            const ind = this.findFirstOptionIndex();
+            this.onOptionSelect(null, this.visibleOptions()[ind], false);
         }
     }
-    get label() {
-        if (typeof this.selectedOption === 'number') {
-            this.selectedOption = this.selectedOption.toString();
-        }
-        return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;
+    onOptionSelect(event, option, isHide = true) {
+        const value = this.getOptionValue(option);
+        this.updateModel(value, event);
+        this.focusedOptionIndex.set(this.findSelectedOptionIndex());
+        isHide && this.hide(true);
     }
-    get emptyMessageLabel() {
-        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    onOptionMouseEnter(event, index) {
+        if (this.focusOnHover) {
+            this.changeFocusedOptionIndex(event, index);
+        }
     }
-    get emptyFilterMessageLabel() {
-        return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
+    updateModel(value, event) {
+        this.value = value;
+        this.onModelChange(value);
+        if (this.value !== this.modelValue()) {
+            this.onChange.emit({
+                originalEvent: event,
+                value: value
+            });
+        }
+        this.modelValue.set(value);
+        this.selectedOptionUpdated = true;
     }
-    get filled() {
-        if (typeof this.value === 'string')
-            return !!this.value;
-        return this.value || this.value != null || this.value != undefined;
+    isSelected(option) {
+        return this.isValidOption(option) && ObjectUtils.equals(this.modelValue(), this.getOptionValue(option), this.equalityKey());
     }
-    get isVisibleClearIcon() {
-        return this.value != null && this.value !== '' && this.showClear && !this.disabled;
+    ngAfterViewInit() {
+        if (this.editable) {
+            this.updateEditableLabel();
+        }
     }
     updateEditableLabel() {
-        if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
-            this.editableInputViewChild.nativeElement.value = this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value || '';
+        if (this.editableInputViewChild) {
+            this.editableInputViewChild.nativeElement.value = this.getOptionLabel(this.modelValue()) === undefined ? this.editableInputViewChild.nativeElement.value : this.getOptionLabel(this.modelValue());
         }
     }
+    getOptionIndex(index, scrollerOptions) {
+        return this.virtualScrollerDisabled ? index : scrollerOptions && scrollerOptions.getItemOptions(index)['index'];
+    }
     getOptionLabel(option) {
         return this.optionLabel ? ObjectUtils.resolveFieldData(option, this.optionLabel) : option && option.label !== undefined ? option.label : option;
     }
@@ -665,53 +822,23 @@ class Dropdown {
     getOptionGroupChildren(optionGroup) {
         return this.optionGroupChildren ? ObjectUtils.resolveFieldData(optionGroup, this.optionGroupChildren) : optionGroup.items;
     }
-    onItemClick(event) {
-        const option = event.option;
-        if (!this.isOptionDisabled(option)) {
-            this.selectItem(event.originalEvent, option);
-            this.accessibleViewChild?.nativeElement.focus({ preventScroll: true });
-        }
-        setTimeout(() => {
-            this.hide();
-        }, 1);
+    getAriaPosInset(index) {
+        return ((this.optionGroupLabel
+            ? index -
+                this.visibleOptions()
+                    .slice(0, index)
+                    .filter((option) => this.isOptionGroup(option)).length
+            : index) + 1);
     }
-    selectItem(event, option) {
-        if (this.selectedOption != option) {
-            this.selectedOption = option;
-            this.value = this.getOptionValue(option);
-            this.onModelChange(this.value);
-            this.updateEditableLabel();
-            this.onChange.emit({
-                originalEvent: event,
-                value: this.value
-            });
-        }
-    }
-    ngAfterViewChecked() {
-        if (this.optionsChanged && this.overlayVisible) {
-            this.optionsChanged = false;
-            this.zone.runOutsideAngular(() => {
-                setTimeout(() => {
-                    if (this.overlayViewChild) {
-                        this.overlayViewChild.alignOverlay();
-                    }
-                }, 1);
-            });
-        }
-        if (this.selectedOptionUpdated && this.itemsWrapper) {
-            let selectedItem = DomHandler.findSingle(this.overlayViewChild?.overlayViewChild?.nativeElement, 'li.p-highlight');
-            if (selectedItem) {
-                DomHandler.scrollInView(this.itemsWrapper, selectedItem);
-            }
-            this.selectedOptionUpdated = false;
-        }
+    get ariaSetSize() {
+        return this.visibleOptions().filter((option) => !this.isOptionGroup(option)).length;
     }
     writeValue(value) {
         if (this.filter) {
             this.resetFilter();
         }
         this.value = value;
-        this.updateSelectedOption(value);
+        this.updateModel(this.value);
         this.updateEditableLabel();
         this.cd.markForCheck();
     }
@@ -720,25 +847,10 @@ class Dropdown {
      * @group Method
      */
     resetFilter() {
-        this._filterValue = null;
+        this._filterValue.set(null);
         if (this.filterViewChild && this.filterViewChild.nativeElement) {
             this.filterViewChild.nativeElement.value = '';
         }
-        this.optionsToDisplay = this.options;
-    }
-    updateSelectedOption(val) {
-        this.selectedOption = this.findOption(val, this.optionsToDisplay);
-        if (this.autoDisplayFirst && !this.placeholder && !this.selectedOption && this.optionsToDisplay && this.optionsToDisplay.length && !this.editable) {
-            if (this.group) {
-                this.selectedOption = this.getOptionGroupChildren(this.optionsToDisplay[0])[0];
-            }
-            else {
-                this.selectedOption = this.optionsToDisplay[0];
-            }
-            this.value = this.getOptionValue(this.selectedOption);
-            this.onModelChange(this.value);
-        }
-        this.selectedOptionUpdated = true;
     }
     registerOnChange(fn) {
         this.onModelChange = fn;
@@ -750,48 +862,42 @@ class Dropdown {
         this.disabled = val;
         this.cd.markForCheck();
     }
-    onMouseclick(event) {
-        if (this.disabled || this.readonly || this.isInputClick(event)) {
+    onContainerClick(event) {
+        if (this.disabled || this.readonly) {
             return;
         }
+        this.focusInputViewChild?.nativeElement.focus({ preventScroll: true });
+        if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section="clearicon"]')) {
+            return;
+        }
+        else if (!this.overlayViewChild || !this.overlayViewChild.el.nativeElement.contains(event.target)) {
+            this.overlayVisible ? this.hide(true) : this.show(true);
+        }
         this.onClick.emit(event);
-        this.accessibleViewChild?.nativeElement.focus({ preventScroll: true });
-        if (this.overlayVisible)
-            this.hide();
-        else
-            this.show();
         this.cd.detectChanges();
     }
-    isInputClick(event) {
-        const target = event.target;
-        return (DomHandler.hasClass(target, 'p-dropdown-clear-icon') ||
-            target.closest('.p-dropdown-clear-icon') !== null ||
-            target.isSameNode(this.accessibleViewChild?.nativeElement) ||
-            (this.editableInputViewChild && target.isSameNode(this.editableInputViewChild.nativeElement)));
-    }
     isEmpty() {
-        return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);
+        return !this._options() || (this._options() && this._options().length === 0);
     }
-    onEditableInputFocus(event) {
-        this.focused = true;
-        this.hide();
-        this.onFocus.emit(event);
-    }
-    onEditableInputChange(event) {
-        this.value = event.target.value;
-        this.updateSelectedOption(this.value);
-        this.onModelChange(this.value);
-        this.onChange.emit({
-            originalEvent: event,
-            value: this.value
-        });
+    onEditableInput(event) {
+        const value = event.target.value;
+        this.searchValue = '';
+        const matched = this.searchOptions(event, value);
+        !matched && this.focusedOptionIndex.set(-1);
+        this.onModelChange(value);
+        this.updateModel(value, event);
     }
     /**
      * Displays the panel.
      * @group Method
      */
-    show() {
+    show(isFocus) {
         this.overlayVisible = true;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        if (isFocus) {
+            DomHandler.focus(this.focusInputViewChild?.nativeElement);
+        }
         this.cd.markForCheck();
     }
     onOverlayAnimationStart(event) {
@@ -800,9 +906,9 @@ class Dropdown {
             this.virtualScroll && this.scroller?.setContentEl(this.itemsViewChild?.nativeElement);
             if (this.options && this.options.length) {
                 if (this.virtualScroll) {
-                    const selectedIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
+                    const selectedIndex = this.modelValue() ? this.focusedOptionIndex() : -1;
                     if (selectedIndex !== -1) {
-                        this.scroller?.scrollToIndex(selectedIndex);
+                        this.scroller?.scrollToIndex(0);
                     }
                 }
                 else {
@@ -830,15 +936,24 @@ class Dropdown {
      * Hides the panel.
      * @group Method
      */
-    hide() {
+    hide(isFocus) {
         this.overlayVisible = false;
+        this.focusedOptionIndex.set(-1);
         if (this.filter && this.resetFilterOnHide) {
             this.resetFilter();
         }
+        isFocus && DomHandler.focus(this.focusInputViewChild?.nativeElement);
         this.cd.markForCheck();
     }
     onInputFocus(event) {
+        if (this.disabled) {
+            // For ScreenReaders
+            return;
+        }
         this.focused = true;
+        const focusedOptionIndex = this.focusedOptionIndex() !== -1 ? this.focusedOptionIndex() : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+        this.focusedOptionIndex.set(focusedOptionIndex);
+        this.overlayVisible && this.scrollInView(this.focusedOptionIndex());
         this.onFocus.emit(event);
     }
     onInputBlur(event) {
@@ -849,331 +964,337 @@ class Dropdown {
         }
         this.preventModelTouched = false;
     }
-    findPrevEnabledOption(index) {
-        let prevEnabledOption;
-        if (this.optionsToDisplay && this.optionsToDisplay.length) {
-            for (let i = index - 1; 0 <= i; i--) {
-                let option = this.optionsToDisplay[i];
-                if (this.isOptionDisabled(option)) {
-                    continue;
-                }
-                else {
-                    prevEnabledOption = option;
-                    break;
-                }
-            }
-            if (!prevEnabledOption) {
-                for (let i = this.optionsToDisplay.length - 1; i >= index; i--) {
-                    let option = this.optionsToDisplay[i];
-                    if (this.isOptionDisabled(option)) {
-                        continue;
-                    }
-                    else {
-                        prevEnabledOption = option;
-                        break;
-                    }
-                }
-            }
-        }
-        return prevEnabledOption;
-    }
-    findNextEnabledOption(index) {
-        let nextEnabledOption;
-        if (this.optionsToDisplay && this.optionsToDisplay.length) {
-            for (let i = index + 1; i < this.optionsToDisplay.length; i++) {
-                let option = this.optionsToDisplay[i];
-                if (this.isOptionDisabled(option)) {
-                    continue;
-                }
-                else {
-                    nextEnabledOption = option;
-                    break;
-                }
-            }
-            if (!nextEnabledOption) {
-                for (let i = 0; i < index; i++) {
-                    let option = this.optionsToDisplay[i];
-                    if (this.isOptionDisabled(option)) {
-                        continue;
-                    }
-                    else {
-                        nextEnabledOption = option;
-                        break;
-                    }
-                }
-            }
-        }
-        return nextEnabledOption;
-    }
-    onKeydown(event, search) {
-        if (this.readonly || !this.optionsToDisplay || this.optionsToDisplay.length === null) {
+    onKeyDown(event, search) {
+        if (this.disabled || this.readonly) {
             return;
         }
-        switch (event.which) {
+        switch (event.code) {
             //down
-            case 40:
-                if (!this.overlayVisible && event.altKey) {
-                    this.show();
-                }
-                else {
-                    if (this.group) {
-                        let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-                        if (selectedItemIndex !== -1) {
-                            let nextItemIndex = selectedItemIndex.itemIndex + 1;
-                            if (nextItemIndex < this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex]).length) {
-                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[nextItemIndex]);
-                                this.selectedOptionUpdated = true;
-                            }
-                            else if (this.optionsToDisplay[selectedItemIndex.groupIndex + 1]) {
-                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex + 1])[0]);
-                                this.selectedOptionUpdated = true;
-                            }
-                        }
-                        else {
-                            if (this.optionsToDisplay && this.optionsToDisplay.length > 0) {
-                                this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[0])[0]);
-                            }
-                        }
-                    }
-                    else {
-                        let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-                        let nextEnabledOption = this.findNextEnabledOption(selectedItemIndex);
-                        if (nextEnabledOption) {
-                            this.selectItem(event, nextEnabledOption);
-                            this.selectedOptionUpdated = true;
-                        }
-                    }
-                }
-                event.preventDefault();
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
                 break;
             //up
-            case 38:
-                if (this.group) {
-                    let selectedItemIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-                    if (selectedItemIndex !== -1) {
-                        let prevItemIndex = selectedItemIndex.itemIndex - 1;
-                        if (prevItemIndex >= 0) {
-                            this.selectItem(event, this.getOptionGroupChildren(this.optionsToDisplay[selectedItemIndex.groupIndex])[prevItemIndex]);
-                            this.selectedOptionUpdated = true;
-                        }
-                        else if (prevItemIndex < 0) {
-                            let prevGroup = this.optionsToDisplay[selectedItemIndex.groupIndex - 1];
-                            if (prevGroup) {
-                                this.selectItem(event, this.getOptionGroupChildren(prevGroup)[this.getOptionGroupChildren(prevGroup).length - 1]);
-                                this.selectedOptionUpdated = true;
-                            }
-                        }
-                    }
-                }
-                else {
-                    let selectedItemIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-                    let prevEnabledOption = this.findPrevEnabledOption(selectedItemIndex);
-                    if (prevEnabledOption) {
-                        this.selectItem(event, prevEnabledOption);
-                        this.selectedOptionUpdated = true;
-                    }
-                }
-                event.preventDefault();
+            case 'ArrowUp':
+                this.onArrowUpKey(event, this.editable);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                this.onArrowLeftKey(event, this.editable);
+                break;
+            case 'Delete':
+                this.onDeleteKey(event);
+                break;
+            case 'Home':
+                this.onHomeKey(event, this.editable);
+                break;
+            case 'End':
+                this.onEndKey(event, this.editable);
+                break;
+            case 'PageDown':
+                this.onPageDownKey(event);
+                break;
+            case 'PageUp':
+                this.onPageUpKey(event);
                 break;
             //space
-            case 32:
-                if (search) {
-                    if (!this.overlayVisible) {
-                        this.show();
-                    }
-                    else {
-                        this.hide();
-                    }
-                    event.preventDefault();
-                }
+            case 'Space':
+                this.onSpaceKey(event, search);
                 break;
             //enter
-            case 13:
-                if (this.overlayVisible && (!this.filter || (this.optionsToDisplay && this.optionsToDisplay.length > 0))) {
-                    this.hide();
-                }
-                else if (!this.overlayVisible) {
-                    this.show();
-                }
-                event.preventDefault();
+            case 'Enter':
+            case 'NumpadEnter':
+                this.onEnterKey(event);
                 break;
             //escape and tab
-            case 27:
-            case 9:
-                this.hide();
-                event.preventDefault();
+            case 'Escape':
+                this.onEscapeKey(event);
+                break;
+            case 'Tab':
+                this.onTabKey(event);
+                break;
+            case 'Backspace':
+                this.onBackspaceKey(event, this.editable);
+                break;
+            case 'ShiftLeft':
+            case 'ShiftRight':
+                //NOOP
                 break;
-            //search item based on keyboard input
             default:
-                if (search && !event.metaKey && event.which !== 17) {
-                    this.search(event);
+                if (!event.metaKey && ObjectUtils.isPrintableCharacter(event.key)) {
+                    !this.overlayVisible && this.show();
+                    !this.editable && this.searchOptions(event, event.key);
                 }
                 break;
         }
     }
-    search(event) {
-        if (this.searchTimeout) {
-            clearTimeout(this.searchTimeout);
-        }
-        const char = event.key;
-        this.previousSearchChar = this.currentSearchChar;
-        this.currentSearchChar = char;
-        if (this.previousSearchChar === this.currentSearchChar)
-            this.searchValue = this.currentSearchChar;
-        else
-            this.searchValue = this.searchValue ? this.searchValue + char : char;
-        let newOption;
-        if (this.group) {
-            let searchIndex = this.selectedOption ? this.findOptionGroupIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : { groupIndex: 0, itemIndex: 0 };
-            newOption = this.searchOptionWithinGroup(searchIndex);
-        }
-        else {
-            let searchIndex = this.selectedOption ? this.findOptionIndex(this.getOptionValue(this.selectedOption), this.optionsToDisplay) : -1;
-            newOption = this.searchOption(++searchIndex);
-        }
-        if (newOption && !this.isOptionDisabled(newOption)) {
-            this.selectItem(event, newOption);
-            this.selectedOptionUpdated = true;
+    onFilterKeyDown(event) {
+        switch (event.code) {
+            case 'ArrowDown':
+                this.onArrowDownKey(event);
+                break;
+            case 'ArrowUp':
+                this.onArrowUpKey(event, true);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowRight':
+                this.onArrowLeftKey(event, true);
+                break;
+            case 'Home':
+                this.onHomeKey(event, true);
+                break;
+            case 'End':
+                this.onEndKey(event, true);
+                break;
+            case 'Enter':
+                this.onEnterKey(event);
+                break;
+            case 'Escape':
+                this.onEscapeKey(event);
+                break;
+            case 'Tab':
+                this.onTabKey(event, true);
+                break;
+            default:
+                break;
         }
-        this.searchTimeout = setTimeout(() => {
-            this.searchValue = null;
-        }, 250);
-    }
-    searchOption(index) {
-        let option;
-        if (this.searchValue) {
-            option = this.searchOptionInRange(index, this.optionsToDisplay.length);
-            if (!option) {
-                option = this.searchOptionInRange(0, index);
+    }
+    onFilterBlur(event) {
+        this.focusedOptionIndex.set(-1);
+    }
+    onArrowDownKey(event) {
+        const optionIndex = this.focusedOptionIndex() !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex()) : this.findFirstFocusedOptionIndex();
+        this.changeFocusedOptionIndex(event, optionIndex);
+        !this.overlayVisible && this.show();
+        event.preventDefault();
+    }
+    changeFocusedOptionIndex(event, index) {
+        if (this.focusedOptionIndex() !== index) {
+            this.focusedOptionIndex.set(index);
+            this.scrollInView();
+            if (this.selectOnFocus) {
+                const option = this.visibleOptions()[index];
+                this.onOptionSelect(event, option, false);
             }
         }
-        return option;
-    }
-    searchOptionInRange(start, end) {
-        for (let i = start; i < end; i++) {
-            let opt = this.optionsToDisplay[i];
-            if (this.getOptionLabel(opt)
-                .toLocaleLowerCase(this.filterLocale)
-                .startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) &&
-                !this.isOptionDisabled(opt)) {
-                return opt;
+    }
+    get virtualScrollerDisabled() {
+        return !this.virtualScroll;
+    }
+    scrollInView(index = -1) {
+        const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+        if (this.itemsViewChild && this.itemsViewChild.nativeElement) {
+            const element = DomHandler.findSingle(this.itemsViewChild.nativeElement, `li[id="${id}"]`);
+            if (element) {
+                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
             }
-        }
-        return null;
-    }
-    searchOptionWithinGroup(index) {
-        let option;
-        if (this.searchValue) {
-            if (this.optionsToDisplay) {
-                for (let i = index.groupIndex; i < this.optionsToDisplay.length; i++) {
-                    for (let j = index.groupIndex === i ? index.itemIndex + 1 : 0; j < this.getOptionGroupChildren(this.optionsToDisplay[i]).length; j++) {
-                        let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];
-                        if (this.getOptionLabel(opt)
-                            .toLocaleLowerCase(this.filterLocale)
-                            .startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) &&
-                            !this.isOptionDisabled(opt)) {
-                            return opt;
-                        }
-                    }
-                }
-                if (!option) {
-                    for (let i = 0; i <= index.groupIndex; i++) {
-                        for (let j = 0; j < (index.groupIndex === i ? index.itemIndex : this.getOptionGroupChildren(this.optionsToDisplay[i]).length); j++) {
-                            let opt = this.getOptionGroupChildren(this.optionsToDisplay[i])[j];
-                            if (this.getOptionLabel(opt)
-                                .toLocaleLowerCase(this.filterLocale)
-                                .startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale)) &&
-                                !this.isOptionDisabled(opt)) {
-                                return opt;
-                            }
-                        }
-                    }
-                }
+            else if (!this.virtualScrollerDisabled) {
+                setTimeout(() => {
+                    this.virtualScroll && this.scroller?.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex());
+                }, 0);
             }
         }
-        return null;
-    }
-    findOptionIndex(val, opts) {
-        let index = -1;
-        if (opts) {
-            for (let i = 0; i < opts.length; i++) {
-                if ((val == null && this.getOptionValue(opts[i]) == null) || ObjectUtils.equals(val, this.getOptionValue(opts[i]), this.dataKey)) {
-                    index = i;
-                    break;
-                }
+    }
+    get focusedOptionId() {
+        return this.focusedOptionIndex() !== -1 ? `${this.id}_${this.focusedOptionIndex()}` : null;
+    }
+    hasSelectedOption() {
+        return ObjectUtils.isNotEmpty(this.modelValue());
+    }
+    isValidSelectedOption(option) {
+        return this.isValidOption(option) && this.isSelected(option);
+    }
+    equalityKey() {
+        return this.optionValue ? null : this.dataKey;
+    }
+    findFirstFocusedOptionIndex() {
+        const selectedIndex = this.findSelectedOptionIndex();
+        return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
+    }
+    findFirstOptionIndex() {
+        return this.visibleOptions().findIndex((option) => this.isValidOption(option));
+    }
+    findSelectedOptionIndex() {
+        return this.hasSelectedOption() ? this.visibleOptions().findIndex((option) => this.isValidSelectedOption(option)) : -1;
+    }
+    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;
+    }
+    findPrevOptionIndex(index) {
+        const matchedOptionIndex = index > 0 ? ObjectUtils.findLastIndex(this.visibleOptions().slice(0, index), (option) => this.isValidOption(option)) : -1;
+        return matchedOptionIndex > -1 ? matchedOptionIndex : index;
+    }
+    findLastOptionIndex() {
+        return ObjectUtils.findLastIndex(this.visibleOptions(), (option) => this.isValidOption(option));
+    }
+    findLastFocusedOptionIndex() {
+        const selectedIndex = this.findSelectedOptionIndex();
+        return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
+    }
+    isValidOption(option) {
+        return option && !(this.isOptionDisabled(option) || this.isOptionGroup(option));
+    }
+    isOptionGroup(option) {
+        return this.optionGroupLabel && option.optionGroup && option.group;
+    }
+    onArrowUpKey(event, pressedInInputText = false) {
+        if (event.altKey && !pressedInInputText) {
+            if (this.focusedOptionIndex() !== -1) {
+                const option = this.visibleOptions()[this.focusedOptionIndex()];
+                this.onOptionSelect(event, option);
             }
+            this.overlayVisible && this.hide();
+            event.preventDefault();
         }
-        return index;
-    }
-    findOptionGroupIndex(val, opts) {
-        let groupIndex, itemIndex;
-        if (opts) {
-            for (let i = 0; i < opts.length; i++) {
-                groupIndex = i;
-                itemIndex = this.findOptionIndex(val, this.getOptionGroupChildren(opts[i]));
-                if (itemIndex !== -1) {
-                    break;
-                }
-            }
+        else {
+            const optionIndex = this.focusedOptionIndex() !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex()) : this.findLastFocusedOptionIndex();
+            this.changeFocusedOptionIndex(event, optionIndex);
+            !this.overlayVisible && this.show();
+            event.preventDefault();
         }
-        if (itemIndex !== -1) {
-            return { groupIndex: groupIndex, itemIndex: itemIndex };
+    }
+    onArrowLeftKey(event, pressedInInputText = false) {
+        pressedInInputText && this.focusedOptionIndex.set(-1);
+    }
+    onDeleteKey(event) {
+        if (this.showClear) {
+            this.clear(event);
+            event.preventDefault();
+        }
+    }
+    onHomeKey(event, pressedInInputText = false) {
+        if (pressedInInputText) {
+            event.currentTarget.setSelectionRange(0, 0);
+            this.focusedOptionIndex.set(-1);
         }
         else {
-            return -1;
+            this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());
+            !this.overlayVisible && this.show();
         }
-    }
-    findOption(val, opts, inGroup) {
-        if (this.group && !inGroup) {
-            let opt;
-            if (opts && opts.length) {
-                for (let optgroup of opts) {
-                    opt = this.findOption(val, this.getOptionGroupChildren(optgroup), true);
-                    if (opt) {
-                        break;
-                    }
-                }
-            }
-            return opt;
+        event.preventDefault();
+    }
+    onEndKey(event, pressedInInputText = false) {
+        if (pressedInInputText) {
+            const target = event.currentTarget;
+            const len = target.value.length;
+            target.setSelectionRange(len, len);
+            this.focusedOptionIndex.set(-1);
         }
         else {
-            let index = this.findOptionIndex(val, opts);
-            return index != -1 ? opts[index] : null;
+            this.changeFocusedOptionIndex(event, this.findLastOptionIndex());
+            !this.overlayVisible && this.show();
         }
+        event.preventDefault();
     }
-    onFilterInputChange(event) {
-        let inputValue = event.target.value?.trim();
-        if (inputValue && inputValue.length) {
-            this._filterValue = inputValue;
-            this.activateFilter();
+    onPageDownKey(event) {
+        this.scrollInView(this.visibleOptions().length - 1);
+        event.preventDefault();
+    }
+    onPageUpKey(event) {
+        this.scrollInView(0);
+        event.preventDefault();
+    }
+    onSpaceKey(event, pressedInInputText = false) {
+        !pressedInInputText && this.onEnterKey(event);
+    }
+    onEnterKey(event) {
+        if (!this.overlayVisible) {
+            this.onArrowDownKey(event);
         }
         else {
-            this._filterValue = null;
-            this.optionsToDisplay = this.options;
+            if (this.focusedOptionIndex() !== -1) {
+                const option = this.visibleOptions()[this.focusedOptionIndex()];
+                this.onOptionSelect(event, option);
+            }
+            this.hide();
         }
-        this.virtualScroll && this.scroller?.scrollToIndex(0);
-        this.optionsChanged = true;
-        this.onFilter.emit({ originalEvent: event, filter: this._filterValue });
+        event.preventDefault();
     }
-    activateFilter() {
-        let searchFields = (this.filterBy || this.optionLabel || 'label').split(',');
-        if (this.options && this.options.length) {
-            if (this.group) {
-                let filteredGroups = [];
-                for (let optgroup of this.options) {
-                    let filteredSubOptions = this.filterService.filter(this.getOptionGroupChildren(optgroup), searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
-                    if (filteredSubOptions && filteredSubOptions.length) {
-                        filteredGroups.push({ ...optgroup, ...{ [this.optionGroupChildren]: filteredSubOptions } });
-                    }
-                }
-                this.optionsToDisplay = filteredGroups;
+    onEscapeKey(event) {
+        this.overlayVisible && this.hide(true);
+        event.preventDefault();
+    }
+    onTabKey(event, pressedInInputText = false) {
+        if (!pressedInInputText) {
+            if (this.overlayVisible && this.hasFocusableElements()) {
+                DomHandler.focus(this.firstHiddenFocusableElementOnOverlay.nativeElement);
+                event.preventDefault();
             }
             else {
-                this.optionsToDisplay = this.filterService.filter(this.options, searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);
+                if (this.focusedOptionIndex() !== -1) {
+                    const option = this.visibleOptions()[this.focusedOptionIndex()];
+                    this.onOptionSelect(event, option);
+                }
+                this.overlayVisible && this.hide(this.filter);
             }
-            this.optionsChanged = true;
         }
     }
+    onFirstHiddenFocus(event) {
+        const focusableEl = event.relatedTarget === this.focusInputViewChild.nativeElement ? DomHandler.getFirstFocusableElement(this.overlayViewChild.el.nativeElement, ':not(.p-hidden-focusable)') : this.focusInputViewChild.nativeElement;
+        DomHandler.focus(focusableEl);
+    }
+    hasFocusableElements() {
+        return DomHandler.getFocusableElements(this.overlayViewChild.overlayViewChild.nativeElement, ':not(.p-hidden-focusable)').length > 0;
+    }
+    onBackspaceKey(event, pressedInInputText = false) {
+        if (pressedInInputText) {
+            !this.overlayVisible && this.show();
+        }
+    }
+    searchFields() {
+        return this.filterFields || [this.optionLabel];
+    }
+    searchOptions(event, char) {
+        this.searchValue = (this.searchValue || '') + char;
+        let optionIndex = -1;
+        let matched = false;
+        if (this.focusedOptionIndex() !== -1) {
+            optionIndex = this.visibleOptions()
+                .slice(this.focusedOptionIndex())
+                .findIndex((option) => this.isOptionMatched(option));
+            optionIndex =
+                optionIndex === -1
+                    ? this.visibleOptions()
+                        .slice(0, this.focusedOptionIndex())
+                        .findIndex((option) => this.isOptionMatched(option))
+                    : optionIndex + this.focusedOptionIndex();
+        }
+        else {
+            optionIndex = this.visibleOptions().findIndex((option) => this.isOptionMatched(option));
+        }
+        if (optionIndex !== -1) {
+            matched = true;
+        }
+        if (optionIndex === -1 && this.focusedOptionIndex() === -1) {
+            optionIndex = this.findFirstFocusedOptionIndex();
+        }
+        if (optionIndex !== -1) {
+            this.changeFocusedOptionIndex(event, optionIndex);
+        }
+        if (this.searchTimeout) {
+            clearTimeout(this.searchTimeout);
+        }
+        this.searchTimeout = setTimeout(() => {
+            this.searchValue = '';
+            this.searchTimeout = null;
+        }, 500);
+        return matched;
+    }
+    isOptionMatched(option) {
+        return this.isValidOption(option) && this.getOptionLabel(option).toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));
+    }
+    onFilterInputChange(event) {
+        let value = event.target.value?.trim();
+        this._filterValue.set(value);
+        this.focusedOptionIndex.set(-1);
+        this.onFilter.emit({ originalEvent: event, filter: this._filterValue() });
+        !this.virtualScrollerDisabled && this.scroller.scrollToIndex(0);
+        this.cd.markForCheck();
+    }
     applyFocus() {
         if (this.editable)
             DomHandler.findSingle(this.el.nativeElement, '.p-dropdown-label.p-inputtext').focus();
@@ -1188,84 +1309,66 @@ class Dropdown {
         this.applyFocus();
     }
     clear(event) {
-        this.value = null;
-        this.onModelChange(this.value);
-        this.onChange.emit({
-            originalEvent: event,
-            value: this.value
-        });
-        this.updateSelectedOption(this.value);
+        this.updateModel(null, event);
         this.updateEditableLabel();
         this.onClear.emit(event);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Dropdown, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: i3.FilterService }, { token: i3.PrimeNGConfig }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Dropdown, selector: "p-dropdown", inputs: { scrollHeight: "scrollHeight", filter: "filter", name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: "readonly", required: "required", editable: "editable", appendTo: "appendTo", tabindex: "tabindex", placeholder: "placeholder", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", autofocus: "autofocus", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: "autoDisplayFirst", group: "group", showClear: "showClear", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", autofocusFilter: "autofocusFilter", disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "accessibleViewChild", first: true, predicate: ["in"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }], ngImport: i0, template: `
-        <div
-            #container
-            [ngClass]="{ 'p-dropdown p-component': true, 'p-disabled': disabled, 'p-dropdown-open': overlayVisible, 'p-focus': focused, 'p-dropdown-clearable': showClear && !disabled }"
-            (click)="onMouseclick($event)"
-            [ngStyle]="style"
-            [class]="styleClass"
-        >
-            <div class="p-hidden-accessible">
-                <input
-                    #in
-                    [attr.id]="inputId"
-                    type="text"
-                    readonly
-                    (focus)="onInputFocus($event)"
-                    aria-haspopup="listbox"
-                    [attr.placeholder]="placeholder"
-                    aria-haspopup="listbox"
-                    [attr.aria-label]="ariaLabel"
-                    [attr.aria-expanded]="false"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    (blur)="onInputBlur($event)"
-                    (keydown)="onKeydown($event, true)"
-                    [disabled]="disabled"
-                    [attr.tabindex]="tabindex"
-                    pAutoFocus
-                    [autofocus]="autofocus"
-                    [attr.aria-activedescendant]="overlayVisible ? labelId : null"
-                    role="combobox"
-                />
-            </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.2", type: Dropdown, selector: "p-dropdown", inputs: { id: "id", scrollHeight: "scrollHeight", filter: "filter", name: "name", style: "style", panelStyle: "panelStyle", styleClass: "styleClass", panelStyleClass: "panelStyleClass", readonly: "readonly", required: "required", editable: "editable", appendTo: "appendTo", tabindex: "tabindex", placeholder: "placeholder", filterPlaceholder: "filterPlaceholder", filterLocale: "filterLocale", inputId: "inputId", dataKey: "dataKey", filterBy: "filterBy", filterFields: "filterFields", autofocus: "autofocus", resetFilterOnHide: "resetFilterOnHide", dropdownIcon: "dropdownIcon", optionLabel: "optionLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupChildren: "optionGroupChildren", autoDisplayFirst: "autoDisplayFirst", group: "group", showClear: "showClear", emptyFilterMessage: "emptyFilterMessage", emptyMessage: "emptyMessage", lazy: "lazy", virtualScroll: "virtualScroll", virtualScrollItemSize: "virtualScrollItemSize", virtualScrollOptions: "virtualScrollOptions", overlayOptions: "overlayOptions", ariaFilterLabel: "ariaFilterLabel", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", filterMatchMode: "filterMatchMode", maxlength: "maxlength", tooltip: "tooltip", tooltipPosition: "tooltipPosition", tooltipPositionStyle: "tooltipPositionStyle", tooltipStyleClass: "tooltipStyleClass", focusOnHover: "focusOnHover", selectOnFocus: "selectOnFocus", autoOptionFocus: "autoOptionFocus", autofocusFilter: "autofocusFilter", disabled: "disabled", itemSize: "itemSize", autoZIndex: "autoZIndex", baseZIndex: "baseZIndex", showTransitionOptions: "showTransitionOptions", hideTransitionOptions: "hideTransitionOptions", filterValue: "filterValue", options: "options" }, outputs: { onChange: "onChange", onFilter: "onFilter", onFocus: "onFocus", onBlur: "onBlur", onClick: "onClick", onShow: "onShow", onHide: "onHide", onClear: "onClear", onLazyLoad: "onLazyLoad" }, host: { properties: { "class.p-inputwrapper-filled": "filled", "class.p-inputwrapper-focus": "focused || overlayVisible" }, classAttribute: "p-element p-inputwrapper" }, providers: [DROPDOWN_VALUE_ACCESSOR], queries: [{ propertyName: "templates", predicate: PrimeTemplate }], viewQueries: [{ propertyName: "containerViewChild", first: true, predicate: ["container"], descendants: true }, { propertyName: "filterViewChild", first: true, predicate: ["filter"], descendants: true }, { propertyName: "focusInputViewChild", first: true, predicate: ["focusInput"], descendants: true }, { propertyName: "editableInputViewChild", first: true, predicate: ["editableInput"], descendants: true }, { propertyName: "itemsViewChild", first: true, predicate: ["items"], descendants: true }, { propertyName: "scroller", first: true, predicate: ["scroller"], descendants: true }, { propertyName: "overlayViewChild", first: true, predicate: ["overlay"], descendants: true }, { propertyName: "firstHiddenFocusableElementOnOverlay", first: true, predicate: ["firstHiddenFocusableElementOnOverlay"], descendants: true }], ngImport: i0, template: `
+        <div #container [attr.id]="id" [ngClass]="containerClass" (click)="onContainerClick($event)" [ngStyle]="style" [class]="styleClass">
             <span
-                [attr.id]="labelId"
-                [ngClass]="{ 'p-dropdown-label p-inputtext': true, 'p-dropdown-label-empty': label == null || label.length === 0 }"
-                *ngIf="!editable && label != null"
+                #focusInput
+                [ngClass]="inputClass"
+                *ngIf="!editable"
                 [pTooltip]="tooltip"
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
+                [attr.aria-disabled]="disabled"
+                [attr.id]="inputId"
+                role="combobox"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-haspopup]="'listbox'"
+                [attr.aria-expanded]="overlayVisible"
+                [attr.aria-controls]="id + '_list'"
+                [attr.tabindex]="!disabled ? tabindex : -1"
+                pAutoFocus
+                [autofocus]="autofocus"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (keydown)="onKeyDown($event)"
             >
-                <ng-container *ngIf="!selectedItemTemplate">{{ label || 'empty' }}</ng-container>
-                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: selectedOption }"></ng-container>
+                <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() || 'empty' }}</ng-container>
+                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: modelValue() }"></ng-container>
+                <ng-template #defaultPlaceholder>
+                    <span *ngIf="label() === placeholder || (label() && !placeholder)">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder }}</span>
+                </ng-template>
             </span>
-            <span [ngClass]="{ 'p-dropdown-label p-inputtext p-placeholder': true, 'p-dropdown-label-empty': placeholder == null || placeholder.length === 0 }" *ngIf="!editable && label == null">{{ placeholder || 'empty' }}</span>
             <input
+                *ngIf="editable"
                 #editableInput
                 type="text"
                 [attr.maxlength]="maxlength"
-                class="p-dropdown-label p-inputtext"
-                *ngIf="editable"
+                [ngClass]="inputClass"
                 [disabled]="disabled"
-                [attr.placeholder]="placeholder"
                 aria-haspopup="listbox"
+                [attr.placeholder]="placeholder"
                 [attr.aria-expanded]="overlayVisible"
-                (input)="onEditableInputChange($event)"
-                (focus)="onEditableInputFocus($event)"
+                (input)="onEditableInput($event)"
+                (keydown)="onKeyDown($event)"
+                (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
             />
-
             <ng-container *ngIf="isVisibleClearIcon">
-                <TimesIcon [styleClass]="'p-dropdown-clear-icon'" (click)="clear($event)" *ngIf="!clearIconTemplate" />
-                <span class="p-dropdown-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate">
+                <TimesIcon [styleClass]="'p-dropdown-clear-icon'" (click)="clear($event)" *ngIf="!clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
+                <span class="p-dropdown-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate" [attr.data-pc-section]="'clearicon'">
                     <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
 
-            <div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
+            <div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.data-pc-section]="'trigger'">
                 <ng-container *ngIf="!dropdownIconTemplate">
                     <span class="p-dropdown-trigger-icon" *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
                     <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-dropdown-trigger-icon'" />
@@ -1290,6 +1393,15 @@ class Dropdown {
             >
                 <ng-template pTemplate="content">
                     <div [ngClass]="'p-dropdown-panel p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <span
+                            #firstHiddenFocusableElementOnOverlay
+                            role="presentation"
+                            [attr.aria-hidden]="true"
+                            class="p-hidden-accessible p-hidden-focusable"
+                            [attr.tabindex]="0"
+                            (focus)="onFirstHiddenFocus($event)"
+                            [attr.data-p-hidden-focusable]="true"
+                        ></span>
                         <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                         <div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
                             <ng-container *ngIf="filterTemplate; else builtInFilterElement">
@@ -1301,14 +1413,15 @@ class Dropdown {
                                         #filter
                                         type="text"
                                         autocomplete="off"
-                                        [value]="filterValue || ''"
+                                        [value]="_filterValue() || ''"
                                         class="p-dropdown-filter p-inputtext p-component"
                                         [attr.placeholder]="filterPlaceholder"
-                                        (keydown.enter)="$event.preventDefault()"
-                                        (keydown)="onKeydown($event, false)"
+                                        [attr.aria-owns]="id + '_list'"
                                         (input)="onFilterInputChange($event)"
                                         [attr.aria-label]="ariaFilterLabel"
-                                        [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId"
+                                        [attr.aria-activedescendant]="focusedOptionId"
+                                        (keydown)="onFilterKeyDown($event)"
+                                        (blur)="onFilterBlur($event)"
                                     />
                                     <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-dropdown-filter-icon'" />
                                     <span *ngIf="filterIconTemplate" class="p-dropdown-filter-icon">
@@ -1321,7 +1434,7 @@ class Dropdown {
                             <p-scroller
                                 *ngIf="virtualScroll"
                                 #scroller
-                                [items]="optionsToDisplay"
+                                [items]="visibleOptions()"
                                 [style]="{ height: scrollHeight }"
                                 [itemSize]="virtualScrollItemSize || _itemSize"
                                 [autoSize]="true"
@@ -1339,35 +1452,35 @@ class Dropdown {
                                 </ng-container>
                             </p-scroller>
                             <ng-container *ngIf="!virtualScroll">
-                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: optionsToDisplay, options: {} }"></ng-container>
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                             </ng-container>
 
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
-                                    <ng-container *ngIf="group">
-                                        <ng-template ngFor let-optgroup [ngForOf]="items">
-                                            <li class="p-dropdown-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
-                                                <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>
-                                                <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: optgroup }"></ng-container>
+                                <ul #items [attr.id]="id + '_list'" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                                    <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                        <ng-container *ngIf="option.group">
+                                            <li class="p-dropdown-item-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                                <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                                <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                             </li>
-                                            <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption }"></ng-container>
-                                        </ng-template>
-                                    </ng-container>
-                                    <ng-container *ngIf="!group">
-                                        <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: items, selectedOption: selectedOption }"></ng-container>
-                                    </ng-container>
-                                    <ng-template #itemslist let-options let-selectedOption="selectedOption">
-                                        <ng-template ngFor let-option let-i="index" [ngForOf]="options">
+                                        </ng-container>
+                                        <ng-container *ngIf="!option.group">
                                             <p-dropdownItem
+                                                [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                                 [option]="option"
-                                                [selected]="selectedOption == option"
+                                                [selected]="isSelected(option)"
                                                 [label]="getOptionLabel(option)"
                                                 [disabled]="isOptionDisabled(option)"
-                                                (onClick)="onItemClick($event)"
                                                 [template]="itemTemplate"
+                                                [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                                [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                                [ariaSetSize]="ariaSetSize"
+                                                (onClick)="onOptionSelect($event, option)"
+                                                (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
                                             ></p-dropdownItem>
-                                        </ng-template>
+                                        </ng-container>
                                     </ng-template>
+
                                     <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
                                         <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
                                             {{ emptyFilterMessageLabel }}
@@ -1388,77 +1501,65 @@ class Dropdown {
                 </ng-template>
             </p-overlay>
         </div>
-    `, isInline: true, styles: ["@layer primeng{.p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i4.Overlay; }), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.PrimeTemplate; }), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return i6.Scroller; }), selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i7.AutoFocus; }), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return SearchIcon; }), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(function () { return DropdownItem; }), selector: "p-dropdownItem", inputs: ["option", "selected", "label", "disabled", "visible", "itemSize", "template"], outputs: ["onClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, styles: ["@layer primeng{.p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;opacity:0}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute;top:0;left:0}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-item-group{cursor:auto}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(function () { return i1.NgClass; }), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgForOf; }), selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgIf; }), selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgTemplateOutlet; }), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i0.forwardRef(function () { return i1.NgStyle; }), selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i0.forwardRef(function () { return i4.Overlay; }), selector: "p-overlay", inputs: ["visible", "mode", "style", "styleClass", "contentStyle", "contentStyleClass", "target", "appendTo", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "listener", "responsive", "options"], outputs: ["visibleChange", "onBeforeShow", "onShow", "onBeforeHide", "onHide", "onAnimationStart", "onAnimationDone"] }, { kind: "directive", type: i0.forwardRef(function () { return i3.PrimeTemplate; }), selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i0.forwardRef(function () { return i5.Tooltip; }), selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i0.forwardRef(function () { return i6.Scroller; }), selector: "p-scroller", inputs: ["id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i0.forwardRef(function () { return i7.AutoFocus; }), selector: "[pAutoFocus]", inputs: ["autofocus"] }, { kind: "component", type: i0.forwardRef(function () { return TimesIcon; }), selector: "TimesIcon" }, { kind: "component", type: i0.forwardRef(function () { return ChevronDownIcon; }), selector: "ChevronDownIcon" }, { kind: "component", type: i0.forwardRef(function () { return SearchIcon; }), selector: "SearchIcon" }, { kind: "component", type: i0.forwardRef(function () { return DropdownItem; }), selector: "p-dropdownItem", inputs: ["id", "option", "selected", "focused", "label", "disabled", "visible", "itemSize", "ariaPosInset", "ariaSetSize", "template"], outputs: ["onClick", "onMouseEnter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImport: i0, type: Dropdown, decorators: [{
             type: Component,
             args: [{ selector: 'p-dropdown', template: `
-        <div
-            #container
-            [ngClass]="{ 'p-dropdown p-component': true, 'p-disabled': disabled, 'p-dropdown-open': overlayVisible, 'p-focus': focused, 'p-dropdown-clearable': showClear && !disabled }"
-            (click)="onMouseclick($event)"
-            [ngStyle]="style"
-            [class]="styleClass"
-        >
-            <div class="p-hidden-accessible">
-                <input
-                    #in
-                    [attr.id]="inputId"
-                    type="text"
-                    readonly
-                    (focus)="onInputFocus($event)"
-                    aria-haspopup="listbox"
-                    [attr.placeholder]="placeholder"
-                    aria-haspopup="listbox"
-                    [attr.aria-label]="ariaLabel"
-                    [attr.aria-expanded]="false"
-                    [attr.aria-labelledby]="ariaLabelledBy"
-                    (blur)="onInputBlur($event)"
-                    (keydown)="onKeydown($event, true)"
-                    [disabled]="disabled"
-                    [attr.tabindex]="tabindex"
-                    pAutoFocus
-                    [autofocus]="autofocus"
-                    [attr.aria-activedescendant]="overlayVisible ? labelId : null"
-                    role="combobox"
-                />
-            </div>
+        <div #container [attr.id]="id" [ngClass]="containerClass" (click)="onContainerClick($event)" [ngStyle]="style" [class]="styleClass">
             <span
-                [attr.id]="labelId"
-                [ngClass]="{ 'p-dropdown-label p-inputtext': true, 'p-dropdown-label-empty': label == null || label.length === 0 }"
-                *ngIf="!editable && label != null"
+                #focusInput
+                [ngClass]="inputClass"
+                *ngIf="!editable"
                 [pTooltip]="tooltip"
                 [tooltipPosition]="tooltipPosition"
                 [positionStyle]="tooltipPositionStyle"
                 [tooltipStyleClass]="tooltipStyleClass"
+                [attr.aria-disabled]="disabled"
+                [attr.id]="inputId"
+                role="combobox"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-labelledby]="ariaLabelledBy"
+                [attr.aria-haspopup]="'listbox'"
+                [attr.aria-expanded]="overlayVisible"
+                [attr.aria-controls]="id + '_list'"
+                [attr.tabindex]="!disabled ? tabindex : -1"
+                pAutoFocus
+                [autofocus]="autofocus"
+                [attr.aria-activedescendant]="focused ? focusedOptionId : undefined"
+                (focus)="onInputFocus($event)"
+                (blur)="onInputBlur($event)"
+                (keydown)="onKeyDown($event)"
             >
-                <ng-container *ngIf="!selectedItemTemplate">{{ label || 'empty' }}</ng-container>
-                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: selectedOption }"></ng-container>
+                <ng-container *ngIf="!selectedItemTemplate; else defaultPlaceholder">{{ label() === 'p-emptylabel' ? '&nbsp;' : label() || 'empty' }}</ng-container>
+                <ng-container *ngTemplateOutlet="selectedItemTemplate; context: { $implicit: modelValue() }"></ng-container>
+                <ng-template #defaultPlaceholder>
+                    <span *ngIf="label() === placeholder || (label() && !placeholder)">{{ label() === 'p-emptylabel' ? '&nbsp;' : placeholder }}</span>
+                </ng-template>
             </span>
-            <span [ngClass]="{ 'p-dropdown-label p-inputtext p-placeholder': true, 'p-dropdown-label-empty': placeholder == null || placeholder.length === 0 }" *ngIf="!editable && label == null">{{ placeholder || 'empty' }}</span>
             <input
+                *ngIf="editable"
                 #editableInput
                 type="text"
                 [attr.maxlength]="maxlength"
-                class="p-dropdown-label p-inputtext"
-                *ngIf="editable"
+                [ngClass]="inputClass"
                 [disabled]="disabled"
-                [attr.placeholder]="placeholder"
                 aria-haspopup="listbox"
+                [attr.placeholder]="placeholder"
                 [attr.aria-expanded]="overlayVisible"
-                (input)="onEditableInputChange($event)"
-                (focus)="onEditableInputFocus($event)"
+                (input)="onEditableInput($event)"
+                (keydown)="onKeyDown($event)"
+                (focus)="onInputFocus($event)"
                 (blur)="onInputBlur($event)"
             />
-
             <ng-container *ngIf="isVisibleClearIcon">
-                <TimesIcon [styleClass]="'p-dropdown-clear-icon'" (click)="clear($event)" *ngIf="!clearIconTemplate" />
-                <span class="p-dropdown-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate">
+                <TimesIcon [styleClass]="'p-dropdown-clear-icon'" (click)="clear($event)" *ngIf="!clearIconTemplate" [attr.data-pc-section]="'clearicon'" />
+                <span class="p-dropdown-clear-icon" (click)="clear($event)" *ngIf="clearIconTemplate" [attr.data-pc-section]="'clearicon'">
                     <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
                 </span>
             </ng-container>
 
-            <div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible">
+            <div class="p-dropdown-trigger" role="button" aria-label="dropdown trigger" aria-haspopup="listbox" [attr.aria-expanded]="overlayVisible" [attr.data-pc-section]="'trigger'">
                 <ng-container *ngIf="!dropdownIconTemplate">
                     <span class="p-dropdown-trigger-icon" *ngIf="dropdownIcon" [ngClass]="dropdownIcon"></span>
                     <ChevronDownIcon *ngIf="!dropdownIcon" [styleClass]="'p-dropdown-trigger-icon'" />
@@ -1483,6 +1584,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             >
                 <ng-template pTemplate="content">
                     <div [ngClass]="'p-dropdown-panel p-component'" [ngStyle]="panelStyle" [class]="panelStyleClass">
+                        <span
+                            #firstHiddenFocusableElementOnOverlay
+                            role="presentation"
+                            [attr.aria-hidden]="true"
+                            class="p-hidden-accessible p-hidden-focusable"
+                            [attr.tabindex]="0"
+                            (focus)="onFirstHiddenFocus($event)"
+                            [attr.data-p-hidden-focusable]="true"
+                        ></span>
                         <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                         <div class="p-dropdown-header" *ngIf="filter" (click)="$event.stopPropagation()">
                             <ng-container *ngIf="filterTemplate; else builtInFilterElement">
@@ -1494,14 +1604,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                         #filter
                                         type="text"
                                         autocomplete="off"
-                                        [value]="filterValue || ''"
+                                        [value]="_filterValue() || ''"
                                         class="p-dropdown-filter p-inputtext p-component"
                                         [attr.placeholder]="filterPlaceholder"
-                                        (keydown.enter)="$event.preventDefault()"
-                                        (keydown)="onKeydown($event, false)"
+                                        [attr.aria-owns]="id + '_list'"
                                         (input)="onFilterInputChange($event)"
                                         [attr.aria-label]="ariaFilterLabel"
-                                        [attr.aria-activedescendant]="overlayVisible ? 'p-highlighted-option' : labelId"
+                                        [attr.aria-activedescendant]="focusedOptionId"
+                                        (keydown)="onFilterKeyDown($event)"
+                                        (blur)="onFilterBlur($event)"
                                     />
                                     <SearchIcon *ngIf="!filterIconTemplate" [styleClass]="'p-dropdown-filter-icon'" />
                                     <span *ngIf="filterIconTemplate" class="p-dropdown-filter-icon">
@@ -1514,7 +1625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                             <p-scroller
                                 *ngIf="virtualScroll"
                                 #scroller
-                                [items]="optionsToDisplay"
+                                [items]="visibleOptions()"
                                 [style]="{ height: scrollHeight }"
                                 [itemSize]="virtualScrollItemSize || _itemSize"
                                 [autoSize]="true"
@@ -1532,35 +1643,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                                 </ng-container>
                             </p-scroller>
                             <ng-container *ngIf="!virtualScroll">
-                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: optionsToDisplay, options: {} }"></ng-container>
+                                <ng-container *ngTemplateOutlet="buildInItems; context: { $implicit: visibleOptions(), options: {} }"></ng-container>
                             </ng-container>
 
                             <ng-template #buildInItems let-items let-scrollerOptions="options">
-                                <ul #items [attr.id]="listId" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
-                                    <ng-container *ngIf="group">
-                                        <ng-template ngFor let-optgroup [ngForOf]="items">
-                                            <li class="p-dropdown-item-group" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
-                                                <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(optgroup) || 'empty' }}</span>
-                                                <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: optgroup }"></ng-container>
+                                <ul #items [attr.id]="id + '_list'" class="p-dropdown-items" [ngClass]="scrollerOptions.contentStyleClass" [style]="scrollerOptions.contentStyle" role="listbox">
+                                    <ng-template ngFor let-option [ngForOf]="items" let-i="index">
+                                        <ng-container *ngIf="option.group">
+                                            <li class="p-dropdown-item-group" [attr.id]="id + '_' + getOptionIndex(i, scrollerOptions)" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }" role="option">
+                                                <span *ngIf="!groupTemplate">{{ getOptionGroupLabel(option.optionGroup) }}</span>
+                                                <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: option.optionGroup }"></ng-container>
                                             </li>
-                                            <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: getOptionGroupChildren(optgroup), selectedOption: selectedOption }"></ng-container>
-                                        </ng-template>
-                                    </ng-container>
-                                    <ng-container *ngIf="!group">
-                                        <ng-container *ngTemplateOutlet="itemslist; context: { $implicit: items, selectedOption: selectedOption }"></ng-container>
-                                    </ng-container>
-                                    <ng-template #itemslist let-options let-selectedOption="selectedOption">
-                                        <ng-template ngFor let-option let-i="index" [ngForOf]="options">
+                                        </ng-container>
+                                        <ng-container *ngIf="!option.group">
                                             <p-dropdownItem
+                                                [id]="id + '_' + getOptionIndex(i, scrollerOptions)"
                                                 [option]="option"
-                                                [selected]="selectedOption == option"
+                                                [selected]="isSelected(option)"
                                                 [label]="getOptionLabel(option)"
                                                 [disabled]="isOptionDisabled(option)"
-                                                (onClick)="onItemClick($event)"
                                                 [template]="itemTemplate"
+                                                [focused]="focusedOptionIndex() === getOptionIndex(i, scrollerOptions)"
+                                                [ariaPosInset]="getAriaPosInset(getOptionIndex(i, scrollerOptions))"
+                                                [ariaSetSize]="ariaSetSize"
+                                                (onClick)="onOptionSelect($event, option)"
+                                                (onMouseEnter)="onOptionMouseEnter($event, getOptionIndex(i, scrollerOptions))"
                                             ></p-dropdownItem>
-                                        </ng-template>
+                                        </ng-container>
                                     </ng-template>
+
                                     <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message" [ngStyle]="{ height: scrollerOptions.itemSize + 'px' }">
                                         <ng-container *ngIf="!emptyFilterTemplate && !emptyTemplate; else emptyFilter">
                                             {{ emptyFilterMessageLabel }}
@@ -1585,8 +1696,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                         class: 'p-element p-inputwrapper',
                         '[class.p-inputwrapper-filled]': 'filled',
                         '[class.p-inputwrapper-focus]': 'focused || overlayVisible'
-                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@layer primeng{.p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;visibility:hidden}input.p-dropdown-label{cursor:default}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }]; }, propDecorators: { scrollHeight: [{
+                    }, providers: [DROPDOWN_VALUE_ACCESSOR], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["@layer primeng{.p-dropdown{display:inline-flex;cursor:pointer;position:relative;-webkit-user-select:none;user-select:none}.p-dropdown-clear-icon{position:absolute;top:50%;margin-top:-.5rem}.p-dropdown-trigger{display:flex;align-items:center;justify-content:center;flex-shrink:0}.p-dropdown-label{display:block;white-space:nowrap;overflow:hidden;flex:1 1 auto;width:1%;text-overflow:ellipsis;cursor:pointer}.p-dropdown-label-empty{overflow:hidden;opacity:0}input.p-dropdown-label{cursor:default}.p-dropdown .p-dropdown-panel{min-width:100%}.p-dropdown-panel{position:absolute;top:0;left:0}.p-dropdown-items-wrapper{overflow:auto}.p-dropdown-item{cursor:pointer;font-weight:400;white-space:nowrap;position:relative;overflow:hidden}.p-dropdown-item-group{cursor:auto}.p-dropdown-items{margin:0;padding:0;list-style-type:none}.p-dropdown-filter{width:100%}.p-dropdown-filter-container{position:relative}.p-dropdown-filter-icon{position:absolute;top:50%;margin-top:-.5rem}.p-fluid .p-dropdown{display:flex}.p-fluid .p-dropdown .p-dropdown-label{width:1%}}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i3.FilterService }, { type: i3.PrimeNGConfig }]; }, propDecorators: { id: [{
+                type: Input
+            }], scrollHeight: [{
                 type: Input
             }], filter: [{
                 type: Input
@@ -1622,6 +1735,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], filterBy: [{
                 type: Input
+            }], filterFields: [{
+                type: Input
             }], autofocus: [{
                 type: Input
             }], resetFilterOnHide: [{
@@ -1676,6 +1791,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
                 type: Input
             }], tooltipStyleClass: [{
                 type: Input
+            }], focusOnHover: [{
+                type: Input
+            }], selectOnFocus: [{
+                type: Input
+            }], autoOptionFocus: [{
+                type: Input
             }], autofocusFilter: [{
                 type: Input
             }], disabled: [{
@@ -1718,9 +1839,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], filterViewChild: [{
                 type: ViewChild,
                 args: ['filter']
-            }], accessibleViewChild: [{
+            }], focusInputViewChild: [{
                 type: ViewChild,
-                args: ['in']
+                args: ['focusInput']
             }], editableInputViewChild: [{
                 type: ViewChild,
                 args: ['editableInput']
@@ -1733,6 +1854,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.2", ngImpor
             }], overlayViewChild: [{
                 type: ViewChild,
                 args: ['overlay']
+            }], firstHiddenFocusableElementOnOverlay: [{
+                type: ViewChild,
+                args: ['firstHiddenFocusableElementOnOverlay']
             }], templates: [{
                 type: ContentChildren,
                 args: [PrimeTemplate]