primevue/select/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/select/BaseSelect.vue","../../src/select/Select.vue","../../src/select/Select.vue?vue&type=template&id=2c7140b4&lang.js"],"sourcesContent":["<script>\nimport BaseInput from '@primevue/core/baseinput';\nimport SelectStyle from 'primevue/select/style';\n\nexport default {\n    name: 'BaseSelect',\n    extends: BaseInput,\n    props: {\n        options: Array,\n        optionLabel: [String, Function],\n        optionValue: [String, Function],\n        optionDisabled: [String, Function],\n        optionGroupLabel: [String, Function],\n        optionGroupChildren: [String, Function],\n        scrollHeight: {\n            type: String,\n            default: '14rem'\n        },\n        filter: Boolean,\n        filterPlaceholder: String,\n        filterLocale: String,\n        filterMatchMode: {\n            type: String,\n            default: 'contains'\n        },\n        filterFields: {\n            type: Array,\n            default: null\n        },\n        editable: Boolean,\n        placeholder: {\n            type: String,\n            default: null\n        },\n        dataKey: null,\n        showClear: {\n            type: Boolean,\n            default: false\n        },\n        inputId: {\n            type: String,\n            default: null\n        },\n        inputClass: {\n            type: [String, Object],\n            default: null\n        },\n        inputStyle: {\n            type: Object,\n            default: null\n        },\n        labelId: {\n            type: String,\n            default: null\n        },\n        labelClass: {\n            type: [String, Object],\n            default: null\n        },\n        labelStyle: {\n            type: Object,\n            default: null\n        },\n        panelClass: {\n            type: [String, Object],\n            default: null\n        },\n        overlayStyle: {\n            type: Object,\n            default: null\n        },\n        overlayClass: {\n            type: [String, Object],\n            default: null\n        },\n        panelStyle: {\n            type: Object,\n            default: null\n        },\n        appendTo: {\n            type: [String, Object],\n            default: 'body'\n        },\n        loading: {\n            type: Boolean,\n            default: false\n        },\n        clearIcon: {\n            type: String,\n            default: undefined\n        },\n        dropdownIcon: {\n            type: String,\n            default: undefined\n        },\n        filterIcon: {\n            type: String,\n            default: undefined\n        },\n        loadingIcon: {\n            type: String,\n            default: undefined\n        },\n        resetFilterOnHide: {\n            type: Boolean,\n            default: false\n        },\n        resetFilterOnClear: {\n            type: Boolean,\n            default: false\n        },\n        virtualScrollerOptions: {\n            type: Object,\n            default: null\n        },\n        autoOptionFocus: {\n            type: Boolean,\n            default: false\n        },\n        autoFilterFocus: {\n            type: Boolean,\n            default: false\n        },\n        selectOnFocus: {\n            type: Boolean,\n            default: false\n        },\n        focusOnHover: {\n            type: Boolean,\n            default: true\n        },\n        highlightOnSelect: {\n            type: Boolean,\n            default: true\n        },\n        checkmark: {\n            type: Boolean,\n            default: false\n        },\n        filterMessage: {\n            type: String,\n            default: null\n        },\n        selectionMessage: {\n            type: String,\n            default: null\n        },\n        emptySelectionMessage: {\n            type: String,\n            default: null\n        },\n        emptyFilterMessage: {\n            type: String,\n            default: null\n        },\n        emptyMessage: {\n            type: String,\n            default: null\n        },\n        tabindex: {\n            type: Number,\n            default: 0\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        },\n        ariaLabelledby: {\n            type: String,\n            default: null\n        }\n    },\n    style: SelectStyle,\n    provide() {\n        return {\n            $pcSelect: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div ref=\"container\" :id=\"$id\" :class=\"cx('root')\" @click=\"onContainerClick\" :data-p=\"containerDataP\" v-bind=\"ptmi('root')\">\n        <input\n            v-if=\"editable\"\n            ref=\"focusInput\"\n            :name=\"name\"\n            :id=\"labelId || inputId\"\n            type=\"text\"\n            :class=\"[cx('label'), inputClass, labelClass]\"\n            :style=\"[inputStyle, labelStyle]\"\n            :value=\"editableInputValue\"\n            :placeholder=\"placeholder\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            :disabled=\"disabled\"\n            autocomplete=\"off\"\n            role=\"combobox\"\n            :aria-label=\"ariaLabel\"\n            :aria-labelledby=\"ariaLabelledby\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"overlayVisible\"\n            :aria-controls=\"$id + '_list'\"\n            :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n            :aria-invalid=\"invalid || undefined\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @keydown=\"onKeyDown\"\n            @input=\"onEditableInput\"\n            :data-p=\"labelDataP\"\n            v-bind=\"ptm('label')\"\n        />\n        <span\n            v-else\n            ref=\"focusInput\"\n            :name=\"name\"\n            :id=\"labelId || inputId\"\n            :class=\"[cx('label'), inputClass, labelClass]\"\n            :style=\"[inputStyle, labelStyle]\"\n            :tabindex=\"!disabled ? tabindex : -1\"\n            role=\"combobox\"\n            :aria-label=\"ariaLabel || (label === 'p-emptylabel' ? undefined : label)\"\n            :aria-labelledby=\"ariaLabelledby\"\n            aria-haspopup=\"listbox\"\n            :aria-expanded=\"overlayVisible\"\n            :aria-controls=\"$id + '_list'\"\n            :aria-activedescendant=\"focused ? focusedOptionId : undefined\"\n            :aria-invalid=\"invalid || undefined\"\n            :aria-disabled=\"disabled\"\n            @focus=\"onFocus\"\n            @blur=\"onBlur\"\n            @keydown=\"onKeyDown\"\n            :data-p=\"labelDataP\"\n            v-bind=\"ptm('label')\"\n        >\n            <slot name=\"value\" :value=\"d_value\" :placeholder=\"placeholder\">{{ label === 'p-emptylabel' ? '&nbsp;' : (label ?? 'empty') }}</slot>\n        </span>\n        <slot v-if=\"isClearIconVisible\" name=\"clearicon\" :class=\"cx('clearIcon')\" :clearCallback=\"onClearClick\">\n            <component :is=\"clearIcon ? 'i' : 'TimesIcon'\" ref=\"clearIcon\" :class=\"[cx('clearIcon'), clearIcon]\" @click=\"onClearClick\" v-bind=\"ptm('clearIcon')\" data-pc-section=\"clearicon\" />\n        </slot>\n        <div :class=\"cx('dropdown')\" v-bind=\"ptm('dropdown')\">\n            <slot v-if=\"loading\" name=\"loadingicon\" :class=\"cx('loadingIcon')\">\n                <span v-if=\"loadingIcon\" :class=\"[cx('loadingIcon'), 'pi-spin', loadingIcon]\" aria-hidden=\"true\" v-bind=\"ptm('loadingIcon')\" />\n                <SpinnerIcon v-else :class=\"cx('loadingIcon')\" spin aria-hidden=\"true\" v-bind=\"ptm('loadingIcon')\" />\n            </slot>\n            <slot v-else name=\"dropdownicon\" :class=\"cx('dropdownIcon')\">\n                <component :is=\"dropdownIcon ? 'span' : 'ChevronDownIcon'\" :class=\"[cx('dropdownIcon'), dropdownIcon]\" aria-hidden=\"true\" :data-p=\"dropdownIconDataP\" v-bind=\"ptm('dropdownIcon')\" />\n            </slot>\n        </div>\n        <Portal :appendTo=\"appendTo\">\n            <transition name=\"p-connected-overlay\" @enter=\"onOverlayEnter\" @after-enter=\"onOverlayAfterEnter\" @leave=\"onOverlayLeave\" @after-leave=\"onOverlayAfterLeave\" v-bind=\"ptm('transition')\">\n                <div v-if=\"overlayVisible\" :ref=\"overlayRef\" :class=\"[cx('overlay'), panelClass, overlayClass]\" :style=\"[panelStyle, overlayStyle]\" @click=\"onOverlayClick\" @keydown=\"onOverlayKeyDown\" :data-p=\"overlayDataP\" v-bind=\"ptm('overlay')\">\n                    <span\n                        ref=\"firstHiddenFocusableElementOnOverlay\"\n                        role=\"presentation\"\n                        aria-hidden=\"true\"\n                        class=\"p-hidden-accessible p-hidden-focusable\"\n                        :tabindex=\"0\"\n                        @focus=\"onFirstHiddenFocus\"\n                        v-bind=\"ptm('hiddenFirstFocusableEl')\"\n                        :data-p-hidden-accessible=\"true\"\n                        :data-p-hidden-focusable=\"true\"\n                    ></span>\n                    <slot name=\"header\" :value=\"d_value\" :options=\"visibleOptions\"></slot>\n                    <div v-if=\"filter\" :class=\"cx('header')\" v-bind=\"ptm('header')\">\n                        <IconField :unstyled=\"unstyled\" :pt=\"ptm('pcFilterContainer')\">\n                            <InputText\n                                ref=\"filterInput\"\n                                type=\"text\"\n                                :value=\"filterValue\"\n                                @vue:mounted=\"onFilterUpdated\"\n                                @vue:updated=\"onFilterUpdated\"\n                                :class=\"cx('pcFilter')\"\n                                :placeholder=\"filterPlaceholder\"\n                                :variant=\"variant\"\n                                :unstyled=\"unstyled\"\n                                role=\"searchbox\"\n                                autocomplete=\"off\"\n                                :aria-owns=\"$id + '_list'\"\n                                :aria-activedescendant=\"focusedOptionId\"\n                                @keydown=\"onFilterKeyDown\"\n                                @blur=\"onFilterBlur\"\n                                @input=\"onFilterChange\"\n                                :pt=\"ptm('pcFilter')\"\n                                :formControl=\"{ novalidate: true }\"\n                            />\n                            <InputIcon :unstyled=\"unstyled\" :pt=\"ptm('pcFilterIconContainer')\">\n                                <slot name=\"filtericon\">\n                                    <span v-if=\"filterIcon\" :class=\"filterIcon\" v-bind=\"ptm('filterIcon')\" />\n                                    <SearchIcon v-else v-bind=\"ptm('filterIcon')\" />\n                                </slot>\n                            </InputIcon>\n                        </IconField>\n                        <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenFilterResult')\" :data-p-hidden-accessible=\"true\">\n                            {{ filterResultMessageText }}\n                        </span>\n                    </div>\n                    <div :class=\"cx('listContainer')\" :style=\"{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }\" v-bind=\"ptm('listContainer')\">\n                        <VirtualScroller :ref=\"virtualScrollerRef\" v-bind=\"virtualScrollerOptions\" :items=\"visibleOptions\" :style=\"{ height: scrollHeight }\" :tabindex=\"-1\" :disabled=\"virtualScrollerDisabled\" :pt=\"ptm('virtualScroller')\">\n                            <template v-slot:content=\"{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }\">\n                                <ul :ref=\"(el) => listRef(el, contentRef)\" :id=\"$id + '_list'\" :class=\"[cx('list'), styleClass]\" :style=\"contentStyle\" role=\"listbox\" v-bind=\"ptm('list')\">\n                                    <template v-for=\"(option, i) of items\" :key=\"getOptionRenderKey(option, getOptionIndex(i, getItemOptions))\">\n                                        <li\n                                            v-if=\"isOptionGroup(option)\"\n                                            :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\"\n                                            :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\"\n                                            :class=\"cx('optionGroup')\"\n                                            role=\"option\"\n                                            v-bind=\"ptm('optionGroup')\"\n                                        >\n                                            <slot name=\"optiongroup\" :option=\"option.optionGroup\" :index=\"getOptionIndex(i, getItemOptions)\">\n                                                <span :class=\"cx('optionGroupLabel')\" v-bind=\"ptm('optionGroupLabel')\">{{ getOptionGroupLabel(option.optionGroup) }}</span>\n                                            </slot>\n                                        </li>\n                                        <li\n                                            v-else\n                                            :id=\"$id + '_' + getOptionIndex(i, getItemOptions)\"\n                                            v-ripple\n                                            :class=\"cx('option', { option, focusedOption: getOptionIndex(i, getItemOptions) })\"\n                                            :style=\"{ height: itemSize ? itemSize + 'px' : undefined }\"\n                                            role=\"option\"\n                                            :aria-label=\"getOptionLabel(option)\"\n                                            :aria-selected=\"isSelected(option)\"\n                                            :aria-disabled=\"isOptionDisabled(option)\"\n                                            :aria-setsize=\"ariaSetSize\"\n                                            :aria-posinset=\"getAriaPosInset(getOptionIndex(i, getItemOptions))\"\n                                            @mousedown=\"onOptionSelect($event, option)\"\n                                            @mousemove=\"onOptionMouseMove($event, getOptionIndex(i, getItemOptions))\"\n                                            :data-p-selected=\"!checkmark && isSelected(option)\"\n                                            :data-p-focused=\"focusedOptionIndex === getOptionIndex(i, getItemOptions)\"\n                                            :data-p-disabled=\"isOptionDisabled(option)\"\n                                            v-bind=\"getPTItemOptions(option, getItemOptions, i, 'option')\"\n                                        >\n                                            <template v-if=\"checkmark\">\n                                                <CheckIcon v-if=\"isSelected(option)\" :class=\"cx('optionCheckIcon')\" v-bind=\"ptm('optionCheckIcon')\" />\n                                                <BlankIcon v-else :class=\"cx('optionBlankIcon')\" v-bind=\"ptm('optionBlankIcon')\" />\n                                            </template>\n                                            <slot name=\"option\" :option=\"option\" :selected=\"isSelected(option)\" :index=\"getOptionIndex(i, getItemOptions)\">\n                                                <span :class=\"cx('optionLabel')\" v-bind=\"ptm('optionLabel')\">{{ getOptionLabel(option) }}</span>\n                                            </slot>\n                                        </li>\n                                    </template>\n                                    <li v-if=\"filterValue && (!items || (items && items.length === 0))\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\" :data-p-hidden-accessible=\"true\">\n                                        <slot name=\"emptyfilter\">{{ emptyFilterMessageText }}</slot>\n                                    </li>\n                                    <li v-else-if=\"!options || (options && options.length === 0)\" :class=\"cx('emptyMessage')\" role=\"option\" v-bind=\"ptm('emptyMessage')\" :data-p-hidden-accessible=\"true\">\n                                        <slot name=\"empty\">{{ emptyMessageText }}</slot>\n                                    </li>\n                                </ul>\n                            </template>\n                            <template v-if=\"$slots.loader\" v-slot:loader=\"{ options }\">\n                                <slot name=\"loader\" :options=\"options\"></slot>\n                            </template>\n                        </VirtualScroller>\n                    </div>\n                    <slot name=\"footer\" :value=\"d_value\" :options=\"visibleOptions\"></slot>\n                    <span v-if=\"!options || (options && options.length === 0)\" role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenEmptyMessage')\" :data-p-hidden-accessible=\"true\">\n                        {{ emptyMessageText }}\n                    </span>\n                    <span role=\"status\" aria-live=\"polite\" class=\"p-hidden-accessible\" v-bind=\"ptm('hiddenSelectedMessage')\" :data-p-hidden-accessible=\"true\">\n                        {{ selectedMessageText }}\n                    </span>\n                    <span\n                        ref=\"lastHiddenFocusableElementOnOverlay\"\n                        role=\"presentation\"\n                        aria-hidden=\"true\"\n                        class=\"p-hidden-accessible p-hidden-focusable\"\n                        :tabindex=\"0\"\n                        @focus=\"onLastHiddenFocus\"\n                        v-bind=\"ptm('hiddenLastFocusableEl')\"\n                        :data-p-hidden-accessible=\"true\"\n                        :data-p-hidden-focusable=\"true\"\n                    ></span>\n                </div>\n            </transition>\n        </Portal>\n    </div>\n</template>\n\n<script>\nimport { cn } from '@primeuix/utils';\nimport { absolutePosition, addStyle, findSingle, focus, getFirstFocusableElement, getFocusableElements, getLastFocusableElement, getOuterWidth, isAndroid, isTouchDevice, isVisible, relativePosition } from '@primeuix/utils/dom';\nimport { equals, findLastIndex, isNotEmpty, isPrintableCharacter, resolveFieldData } from '@primeuix/utils/object';\nimport { ZIndex } from '@primeuix/utils/zindex';\nimport { FilterService } from '@primevue/core/api';\nimport { ConnectedOverlayScrollHandler } from '@primevue/core/utils';\nimport BlankIcon from '@primevue/icons/blank';\nimport CheckIcon from '@primevue/icons/check';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport SearchIcon from '@primevue/icons/search';\nimport SpinnerIcon from '@primevue/icons/spinner';\nimport TimesIcon from '@primevue/icons/times';\nimport IconField from 'primevue/iconfield';\nimport InputIcon from 'primevue/inputicon';\nimport InputText from 'primevue/inputtext';\nimport OverlayEventBus from 'primevue/overlayeventbus';\nimport Portal from 'primevue/portal';\nimport Ripple from 'primevue/ripple';\nimport VirtualScroller from 'primevue/virtualscroller';\nimport BaseSelect from './BaseSelect.vue';\n\nexport default {\n    name: 'Select',\n    extends: BaseSelect,\n    inheritAttrs: false,\n    emits: ['change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],\n    outsideClickListener: null,\n    scrollHandler: null,\n    resizeListener: null,\n    labelClickListener: null,\n    matchMediaOrientationListener: null,\n    overlay: null,\n    list: null,\n    virtualScroller: null,\n    searchTimeout: null,\n    searchValue: null,\n    isModelValueChanged: false,\n    data() {\n        return {\n            clicked: false,\n            focused: false,\n            focusedOptionIndex: -1,\n            filterValue: null,\n            overlayVisible: false,\n            queryOrientation: null\n        };\n    },\n    watch: {\n        modelValue() {\n            this.isModelValueChanged = true;\n        },\n        options() {\n            this.autoUpdateModel();\n        }\n    },\n    mounted() {\n        this.autoUpdateModel();\n        this.bindLabelClickListener();\n        this.bindMatchMediaOrientationListener();\n    },\n    updated() {\n        if (this.overlayVisible && this.isModelValueChanged) {\n            this.scrollInView(this.findSelectedOptionIndex());\n        }\n\n        this.isModelValueChanged = false;\n    },\n    beforeUnmount() {\n        this.unbindOutsideClickListener();\n        this.unbindResizeListener();\n        this.unbindLabelClickListener();\n        this.unbindMatchMediaOrientationListener();\n\n        if (this.scrollHandler) {\n            this.scrollHandler.destroy();\n            this.scrollHandler = null;\n        }\n\n        if (this.overlay) {\n            ZIndex.clear(this.overlay);\n            this.overlay = null;\n        }\n    },\n    methods: {\n        getOptionIndex(index, fn) {\n            return this.virtualScrollerDisabled ? index : fn && fn(index)['index'];\n        },\n        getOptionLabel(option) {\n            return this.optionLabel ? resolveFieldData(option, this.optionLabel) : option;\n        },\n        getOptionValue(option) {\n            return this.optionValue ? resolveFieldData(option, this.optionValue) : option;\n        },\n        getOptionRenderKey(option, index) {\n            return (this.dataKey ? resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;\n        },\n        getPTItemOptions(option, itemOptions, index, key) {\n            return this.ptm(key, {\n                context: {\n                    option,\n                    index,\n                    selected: this.isSelected(option),\n                    focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),\n                    disabled: this.isOptionDisabled(option)\n                }\n            });\n        },\n        isOptionDisabled(option) {\n            return this.optionDisabled ? resolveFieldData(option, this.optionDisabled) : false;\n        },\n        isOptionGroup(option) {\n            return this.optionGroupLabel && option.optionGroup && option.group;\n        },\n        getOptionGroupLabel(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupLabel);\n        },\n        getOptionGroupChildren(optionGroup) {\n            return resolveFieldData(optionGroup, this.optionGroupChildren);\n        },\n        getAriaPosInset(index) {\n            return (this.optionGroupLabel ? index - this.visibleOptions.slice(0, index).filter((option) => this.isOptionGroup(option)).length : index) + 1;\n        },\n        show(isFocus) {\n            this.$emit('before-show');\n            this.overlayVisible = true;\n            this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex();\n\n            isFocus && focus(this.$refs.focusInput);\n        },\n        hide(isFocus) {\n            const _hide = () => {\n                this.$emit('before-hide');\n                this.overlayVisible = false;\n                this.clicked = false;\n                this.focusedOptionIndex = -1;\n                this.searchValue = '';\n\n                this.resetFilterOnHide && (this.filterValue = null);\n                isFocus && focus(this.$refs.focusInput);\n            };\n\n            setTimeout(() => {\n                _hide();\n            }, 0); // For ScreenReaders\n        },\n        onFocus(event) {\n            if (this.disabled) {\n                // For ScreenReaders\n                return;\n            }\n\n            this.focused = true;\n\n            if (this.overlayVisible) {\n                this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.editable ? -1 : this.findSelectedOptionIndex();\n                this.scrollInView(this.focusedOptionIndex);\n            }\n\n            this.$emit('focus', event);\n        },\n        onBlur(event) {\n            setTimeout(() => {\n                this.focused = false;\n                this.focusedOptionIndex = -1;\n                this.searchValue = '';\n                this.$emit('blur', event);\n                this.formField.onBlur?.(event);\n            }, 100);\n        },\n        onKeyDown(event) {\n            if (this.disabled || isAndroid()) {\n                event.preventDefault();\n\n                return;\n            }\n\n            const metaKey = event.metaKey || event.ctrlKey;\n\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event, this.editable);\n                    break;\n\n                case 'ArrowLeft':\n                case 'ArrowRight':\n                    this.onArrowLeftKey(event, this.editable);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event, this.editable);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event, this.editable);\n                    break;\n\n                case 'PageDown':\n                    this.onPageDownKey(event);\n                    break;\n\n                case 'PageUp':\n                    this.onPageUpKey(event);\n                    break;\n\n                case 'Space':\n                    this.onSpaceKey(event, this.editable);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                case 'Tab':\n                    this.onTabKey(event);\n                    break;\n\n                case 'Backspace':\n                    this.onBackspaceKey(event, this.editable);\n                    break;\n\n                case 'ShiftLeft':\n                case 'ShiftRight':\n                    //NOOP\n                    break;\n\n                default:\n                    if (!metaKey && isPrintableCharacter(event.key)) {\n                        !this.overlayVisible && this.show();\n                        !this.editable && this.searchOptions(event, event.key);\n                    }\n\n                    break;\n            }\n\n            this.clicked = false;\n        },\n        onEditableInput(event) {\n            const value = event.target.value;\n\n            this.searchValue = '';\n            const matched = this.searchOptions(event, value);\n\n            !matched && (this.focusedOptionIndex = -1);\n\n            this.updateModel(event, value);\n\n            !this.overlayVisible && isNotEmpty(value) && this.show();\n        },\n        onContainerClick(event) {\n            if (this.disabled || this.loading) {\n                return;\n            }\n\n            if (event.target.tagName === 'INPUT' || event.target.getAttribute('data-pc-section') === 'clearicon' || event.target.closest('[data-pc-section=\"clearicon\"]')) {\n                return;\n            } else if (!this.overlay || !this.overlay.contains(event.target)) {\n                this.overlayVisible ? this.hide(true) : this.show(true);\n            }\n\n            this.clicked = true;\n        },\n        onClearClick(event) {\n            this.updateModel(event, null);\n            this.resetFilterOnClear && (this.filterValue = null);\n        },\n        onFirstHiddenFocus(event) {\n            const focusableEl = event.relatedTarget === this.$refs.focusInput ? getFirstFocusableElement(this.overlay, ':not([data-p-hidden-focusable=\"true\"])') : this.$refs.focusInput;\n\n            focus(focusableEl);\n        },\n        onLastHiddenFocus(event) {\n            const focusableEl = event.relatedTarget === this.$refs.focusInput ? getLastFocusableElement(this.overlay, ':not([data-p-hidden-focusable=\"true\"])') : this.$refs.focusInput;\n\n            focus(focusableEl);\n        },\n        onOptionSelect(event, option, isHide = true) {\n            const value = this.getOptionValue(option);\n\n            this.updateModel(event, value);\n            isHide && this.hide(true);\n        },\n        onOptionMouseMove(event, index) {\n            if (this.focusOnHover) {\n                this.changeFocusedOptionIndex(event, index);\n            }\n        },\n        onFilterChange(event) {\n            const value = event.target.value;\n\n            this.filterValue = value;\n            this.focusedOptionIndex = -1;\n            this.$emit('filter', { originalEvent: event, value });\n\n            !this.virtualScrollerDisabled && this.virtualScroller.scrollToIndex(0);\n        },\n        onFilterKeyDown(event) {\n            // Check if the event is part of a text composition process (e.g., for Asian languages).\n            // If event.isComposing is true, it means the user is still composing text and the input is not finalized.\n            if (event.isComposing) return;\n\n            switch (event.code) {\n                case 'ArrowDown':\n                    this.onArrowDownKey(event);\n                    break;\n\n                case 'ArrowUp':\n                    this.onArrowUpKey(event, true);\n                    break;\n\n                case 'ArrowLeft':\n                case 'ArrowRight':\n                    this.onArrowLeftKey(event, true);\n                    break;\n\n                case 'Home':\n                    this.onHomeKey(event, true);\n                    break;\n\n                case 'End':\n                    this.onEndKey(event, true);\n                    break;\n\n                case 'Enter':\n                case 'NumpadEnter':\n                    this.onEnterKey(event);\n                    break;\n\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                case 'Tab':\n                    this.onTabKey(event, true);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onFilterBlur() {\n            this.focusedOptionIndex = -1;\n        },\n        onFilterUpdated() {\n            if (this.overlayVisible) {\n                this.alignOverlay();\n            }\n        },\n        onOverlayClick(event) {\n            OverlayEventBus.emit('overlay-click', {\n                originalEvent: event,\n                target: this.$el\n            });\n        },\n        onOverlayKeyDown(event) {\n            switch (event.code) {\n                case 'Escape':\n                    this.onEscapeKey(event);\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onArrowDownKey(event) {\n            if (!this.overlayVisible) {\n                this.show();\n                this.editable && this.changeFocusedOptionIndex(event, this.findSelectedOptionIndex());\n            } else {\n                const optionIndex = this.focusedOptionIndex !== -1 ? this.findNextOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();\n\n                this.changeFocusedOptionIndex(event, optionIndex);\n            }\n\n            event.preventDefault();\n        },\n        onArrowUpKey(event, pressedInInputText = false) {\n            if (event.altKey && !pressedInInputText) {\n                if (this.focusedOptionIndex !== -1) {\n                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n                }\n\n                this.overlayVisible && this.hide();\n                event.preventDefault();\n            } else {\n                const optionIndex = this.focusedOptionIndex !== -1 ? this.findPrevOptionIndex(this.focusedOptionIndex) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();\n\n                this.changeFocusedOptionIndex(event, optionIndex);\n\n                !this.overlayVisible && this.show();\n                event.preventDefault();\n            }\n        },\n        onArrowLeftKey(event, pressedInInputText = false) {\n            pressedInInputText && (this.focusedOptionIndex = -1);\n        },\n        onHomeKey(event, pressedInInputText = false) {\n            if (pressedInInputText) {\n                const target = event.currentTarget;\n\n                if (event.shiftKey) {\n                    target.setSelectionRange(0, event.target.selectionStart);\n                } else {\n                    target.setSelectionRange(0, 0);\n                    this.focusedOptionIndex = -1;\n                }\n            } else {\n                this.changeFocusedOptionIndex(event, this.findFirstOptionIndex());\n\n                !this.overlayVisible && this.show();\n            }\n\n            event.preventDefault();\n        },\n        onEndKey(event, pressedInInputText = false) {\n            if (pressedInInputText) {\n                const target = event.currentTarget;\n\n                if (event.shiftKey) {\n                    target.setSelectionRange(event.target.selectionStart, target.value.length);\n                } else {\n                    const len = target.value.length;\n\n                    target.setSelectionRange(len, len);\n                    this.focusedOptionIndex = -1;\n                }\n            } else {\n                this.changeFocusedOptionIndex(event, this.findLastOptionIndex());\n\n                !this.overlayVisible && this.show();\n            }\n\n            event.preventDefault();\n        },\n        onPageUpKey(event) {\n            this.scrollInView(0);\n            event.preventDefault();\n        },\n        onPageDownKey(event) {\n            this.scrollInView(this.visibleOptions.length - 1);\n            event.preventDefault();\n        },\n        onEnterKey(event) {\n            if (!this.overlayVisible) {\n                this.focusedOptionIndex = -1; // reset\n                this.onArrowDownKey(event);\n            } else {\n                if (this.focusedOptionIndex !== -1) {\n                    this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n                }\n\n                this.hide();\n            }\n\n            event.preventDefault();\n        },\n        onSpaceKey(event, pressedInInputText = false) {\n            !pressedInInputText && this.onEnterKey(event);\n        },\n        onEscapeKey(event) {\n            this.overlayVisible && this.hide(true);\n            event.preventDefault();\n            event.stopPropagation(); //@todo will be changed next versionss\n        },\n        onTabKey(event, pressedInInputText = false) {\n            if (!pressedInInputText) {\n                if (this.overlayVisible && this.hasFocusableElements()) {\n                    focus(this.$refs.firstHiddenFocusableElementOnOverlay);\n\n                    event.preventDefault();\n                } else {\n                    if (this.focusedOptionIndex !== -1) {\n                        this.onOptionSelect(event, this.visibleOptions[this.focusedOptionIndex]);\n                    }\n\n                    this.overlayVisible && this.hide(this.filter);\n                }\n            }\n        },\n        onBackspaceKey(event, pressedInInputText = false) {\n            if (pressedInInputText) {\n                !this.overlayVisible && this.show();\n            }\n        },\n        onOverlayEnter(el) {\n            ZIndex.set('overlay', el, this.$primevue.config.zIndex.overlay);\n\n            addStyle(el, { position: 'absolute', top: '0' });\n            this.alignOverlay();\n            this.scrollInView();\n\n            setTimeout(() => {\n                this.autoFilterFocus && this.filter && focus(this.$refs.filterInput.$el);\n                this.autoUpdateModel();\n            }, 1);\n        },\n        onOverlayAfterEnter() {\n            this.bindOutsideClickListener();\n            this.bindScrollListener();\n            this.bindResizeListener();\n\n            this.$emit('show');\n        },\n        onOverlayLeave() {\n            this.unbindOutsideClickListener();\n            this.unbindScrollListener();\n            this.unbindResizeListener();\n\n            if (this.autoFilterFocus && this.filter && !this.editable) {\n                this.$nextTick(() => {\n                    if (this.$refs.filterInput) {\n                        focus(this.$refs.filterInput.$el);\n                    }\n                });\n            }\n\n            this.$emit('hide');\n            this.overlay = null;\n        },\n        onOverlayAfterLeave(el) {\n            ZIndex.clear(el);\n        },\n        alignOverlay() {\n            if (this.appendTo === 'self') {\n                relativePosition(this.overlay, this.$el);\n            } else {\n                if (this.overlay) {\n                    this.overlay.style.minWidth = getOuterWidth(this.$el) + 'px';\n                    absolutePosition(this.overlay, this.$el);\n                }\n            }\n        },\n        bindOutsideClickListener() {\n            if (!this.outsideClickListener) {\n                this.outsideClickListener = (event) => {\n                    const composedPath = event.composedPath();\n                    if (this.overlayVisible && this.overlay && !composedPath.includes(this.$el) && !composedPath.includes(this.overlay)) {\n                        this.hide();\n                    }\n                };\n\n                document.addEventListener('click', this.outsideClickListener, true);\n            }\n        },\n        unbindOutsideClickListener() {\n            if (this.outsideClickListener) {\n                document.removeEventListener('click', this.outsideClickListener, true);\n                this.outsideClickListener = null;\n            }\n        },\n        bindScrollListener() {\n            if (!this.scrollHandler) {\n                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {\n                    if (this.overlayVisible) {\n                        this.hide();\n                    }\n                });\n            }\n\n            this.scrollHandler.bindScrollListener();\n        },\n        unbindScrollListener() {\n            if (this.scrollHandler) {\n                this.scrollHandler.unbindScrollListener();\n            }\n        },\n        bindResizeListener() {\n            if (!this.resizeListener) {\n                this.resizeListener = () => {\n                    if (this.overlayVisible && !isTouchDevice()) {\n                        this.hide();\n                    }\n                };\n\n                window.addEventListener('resize', this.resizeListener);\n            }\n        },\n        unbindResizeListener() {\n            if (this.resizeListener) {\n                window.removeEventListener('resize', this.resizeListener);\n                this.resizeListener = null;\n            }\n        },\n        bindLabelClickListener() {\n            if (!this.editable && !this.labelClickListener) {\n                const label = document.querySelector(`label[for=\"${this.labelId}\"]`);\n\n                if (label && isVisible(label)) {\n                    this.labelClickListener = () => {\n                        focus(this.$refs.focusInput);\n                    };\n\n                    label.addEventListener('click', this.labelClickListener);\n                }\n            }\n        },\n        unbindLabelClickListener() {\n            if (this.labelClickListener) {\n                const label = document.querySelector(`label[for=\"${this.labelId}\"]`);\n\n                if (label && isVisible(label)) {\n                    label.removeEventListener('click', this.labelClickListener);\n                }\n            }\n        },\n        bindMatchMediaOrientationListener() {\n            if (!this.matchMediaOrientationListener) {\n                const query = matchMedia(`(orientation: portrait)`);\n\n                this.queryOrientation = query;\n\n                this.matchMediaOrientationListener = () => {\n                    this.alignOverlay();\n                };\n\n                this.queryOrientation.addEventListener('change', this.matchMediaOrientationListener);\n            }\n        },\n        unbindMatchMediaOrientationListener() {\n            if (this.matchMediaOrientationListener) {\n                this.queryOrientation.removeEventListener('change', this.matchMediaOrientationListener);\n                this.queryOrientation = null;\n                this.matchMediaOrientationListener = null;\n            }\n        },\n        hasFocusableElements() {\n            return getFocusableElements(this.overlay, ':not([data-p-hidden-focusable=\"true\"])').length > 0;\n        },\n        isOptionExactMatched(option) {\n            return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale) == this.searchValue.toLocaleLowerCase(this.filterLocale);\n        },\n        isOptionStartsWith(option) {\n            return this.isValidOption(option) && typeof this.getOptionLabel(option) === 'string' && this.getOptionLabel(option)?.toLocaleLowerCase(this.filterLocale).startsWith(this.searchValue.toLocaleLowerCase(this.filterLocale));\n        },\n        isValidOption(option) {\n            return isNotEmpty(option) && !(this.isOptionDisabled(option) || this.isOptionGroup(option));\n        },\n        isValidSelectedOption(option) {\n            return this.isValidOption(option) && this.isSelected(option);\n        },\n        isSelected(option) {\n            return equals(this.d_value, this.getOptionValue(option), this.equalityKey);\n        },\n        findFirstOptionIndex() {\n            return this.visibleOptions.findIndex((option) => this.isValidOption(option));\n        },\n        findLastOptionIndex() {\n            return findLastIndex(this.visibleOptions, (option) => this.isValidOption(option));\n        },\n        findNextOptionIndex(index) {\n            const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((option) => this.isValidOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;\n        },\n        findPrevOptionIndex(index) {\n            const matchedOptionIndex = index > 0 ? findLastIndex(this.visibleOptions.slice(0, index), (option) => this.isValidOption(option)) : -1;\n\n            return matchedOptionIndex > -1 ? matchedOptionIndex : index;\n        },\n        findSelectedOptionIndex() {\n            return this.$filled ? this.visibleOptions.findIndex((option) => this.isValidSelectedOption(option)) : -1;\n        },\n        findFirstFocusedOptionIndex() {\n            const selectedIndex = this.findSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;\n        },\n        findLastFocusedOptionIndex() {\n            const selectedIndex = this.findSelectedOptionIndex();\n\n            return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;\n        },\n        searchOptions(event, char) {\n            this.searchValue = (this.searchValue || '') + char;\n\n            let optionIndex = -1;\n            let matched = false;\n\n            if (isNotEmpty(this.searchValue)) {\n                optionIndex = this.visibleOptions.findIndex((option) => this.isOptionExactMatched(option));\n\n                if (optionIndex === -1) {\n                    optionIndex = this.visibleOptions.findIndex((option) => this.isOptionStartsWith(option));\n                }\n\n                if (optionIndex !== -1) {\n                    matched = true;\n                }\n\n                if (optionIndex === -1 && this.focusedOptionIndex === -1) {\n                    optionIndex = this.findFirstFocusedOptionIndex();\n                }\n\n                if (optionIndex !== -1) {\n                    this.changeFocusedOptionIndex(event, optionIndex);\n                }\n            }\n\n            if (this.searchTimeout) {\n                clearTimeout(this.searchTimeout);\n            }\n\n            this.searchTimeout = setTimeout(() => {\n                this.searchValue = '';\n                this.searchTimeout = null;\n            }, 500);\n\n            return matched;\n        },\n        changeFocusedOptionIndex(event, index) {\n            if (this.focusedOptionIndex !== index) {\n                this.focusedOptionIndex = index;\n                this.scrollInView();\n\n                if (this.selectOnFocus) {\n                    this.onOptionSelect(event, this.visibleOptions[index], false);\n                }\n            }\n        },\n        scrollInView(index = -1) {\n            this.$nextTick(() => {\n                const id = index !== -1 ? `${this.$id}_${index}` : this.focusedOptionId;\n                const element = findSingle(this.list, `li[id=\"${id}\"]`);\n\n                if (element) {\n                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'nearest' });\n                } else if (!this.virtualScrollerDisabled) {\n                    this.virtualScroller && this.virtualScroller.scrollToIndex(index !== -1 ? index : this.focusedOptionIndex);\n                }\n            });\n        },\n        autoUpdateModel() {\n            if (this.autoOptionFocus) {\n                this.focusedOptionIndex = this.findFirstFocusedOptionIndex();\n            }\n\n            if (this.selectOnFocus && this.autoOptionFocus && !this.$filled) {\n                this.onOptionSelect(null, this.visibleOptions[this.focusedOptionIndex], false);\n            }\n        },\n        updateModel(event, value) {\n            this.writeValue(value, event);\n            this.$emit('change', { originalEvent: event, value });\n        },\n        flatOptions(options) {\n            return (options || []).reduce((result, option, index) => {\n                result.push({ optionGroup: option, group: true, index });\n\n                const optionGroupChildren = this.getOptionGroupChildren(option);\n\n                optionGroupChildren && optionGroupChildren.forEach((o) => result.push(o));\n\n                return result;\n            }, []);\n        },\n        overlayRef(el) {\n            this.overlay = el;\n        },\n        listRef(el, contentRef) {\n            this.list = el;\n            contentRef && contentRef(el); // For VirtualScroller\n        },\n        virtualScrollerRef(el) {\n            this.virtualScroller = el;\n        }\n    },\n    computed: {\n        visibleOptions() {\n            const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];\n\n            if (this.filterValue) {\n                const filteredOptions = FilterService.filter(options, this.searchFields, this.filterValue, this.filterMatchMode, this.filterLocale);\n\n                if (this.optionGroupLabel) {\n                    const optionGroups = this.options || [];\n                    const filtered = [];\n\n                    optionGroups.forEach((group) => {\n                        const groupChildren = this.getOptionGroupChildren(group);\n                        const filteredItems = groupChildren.filter((item) => filteredOptions.includes(item));\n\n                        if (filteredItems.length > 0) filtered.push({ ...group, [typeof this.optionGroupChildren === 'string' ? this.optionGroupChildren : 'items']: [...filteredItems] });\n                    });\n\n                    return this.flatOptions(filtered);\n                }\n\n                return filteredOptions;\n            }\n\n            return options;\n        },\n        // @deprecated use $filled instead\n        hasSelectedOption() {\n            return this.$filled;\n        },\n        label() {\n            const selectedOptionIndex = this.findSelectedOptionIndex();\n\n            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.placeholder || 'p-emptylabel';\n        },\n        editableInputValue() {\n            const selectedOptionIndex = this.findSelectedOptionIndex();\n\n            return selectedOptionIndex !== -1 ? this.getOptionLabel(this.visibleOptions[selectedOptionIndex]) : this.d_value || '';\n        },\n        equalityKey() {\n            return this.optionValue ? null : this.dataKey;\n        },\n        searchFields() {\n            return this.filterFields || [this.optionLabel];\n        },\n        filterResultMessageText() {\n            return isNotEmpty(this.visibleOptions) ? this.filterMessageText.replaceAll('{0}', this.visibleOptions.length) : this.emptyFilterMessageText;\n        },\n        filterMessageText() {\n            return this.filterMessage || this.$primevue.config.locale.searchMessage || '';\n        },\n        emptyFilterMessageText() {\n            return this.emptyFilterMessage || this.$primevue.config.locale.emptySearchMessage || this.$primevue.config.locale.emptyFilterMessage || '';\n        },\n        emptyMessageText() {\n            return this.emptyMessage || this.$primevue.config.locale.emptyMessage || '';\n        },\n        s