primevue 3.16.2 → 3.18.0

package/cascadeselect/cascadeselect.js

@@ -1,12 +1,12 @@
 this.primevue = this.primevue || {};
-this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
+this.primevue.cascadeselect = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
-    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script$1 = {
         name: 'CascadeSelectSub',
@@ -18,6 +18,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             optionLabel: String,
             optionValue: String,
             optionDisabled: null,
+            optionGroupIcon: String,
             optionGroupLabel: String,
             optionGroupChildren: Array,
             activeOptionPath: Array,
@@ -55,7 +56,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 return !this.isOptionGroup(processedOption) && this.isOptionActive(processedOption);
             },
             isOptionActive(processedOption) {
-                return this.activeOptionPath.some(path => path.key === processedOption.key);
+                return this.activeOptionPath.some((path) => path.key === processedOption.key);
             },
             isOptionFocused(processedOption) {
                 return this.focusedOptionId === this.getOptionId(processedOption);
@@ -76,28 +77,34 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 const sublistWidth = this.$el.offsetParent ? this.$el.offsetWidth : utils.DomHandler.getHiddenElementOuterWidth(this.$el);
                 const itemOuterWidth = utils.DomHandler.getOuterWidth(parentItem.children[0]);
 
-                if ((parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth) > (viewport.width - utils.DomHandler.calculateScrollbarWidth())) {
+                if (parseInt(containerOffset.left, 10) + itemOuterWidth + sublistWidth > viewport.width - utils.DomHandler.calculateScrollbarWidth()) {
                     this.$el.style.left = '-100%';
                 }
+            },
+            getOptionClass(processedOption) {
+                return [
+                    'p-cascadeselect-item',
+                    {
+                        'p-cascadeselect-item-group': this.isOptionGroup(processedOption),
+                        'p-cascadeselect-item-active p-highlight': this.isOptionActive(processedOption),
+                        'p-focus': this.isOptionFocused(processedOption),
+                        'p-disabled': this.isOptionDisabled(processedOption)
+                    }
+                ];
             }
         },
         directives: {
-            'ripple': Ripple__default["default"]
+            ripple: Ripple__default["default"]
         }
     };
 
     const _hoisted_1$1 = { class: "p-cascadeselect-panel p-cascadeselect-items" };
-    const _hoisted_2$1 = ["id", "aria-label", "aria-selected", "aria-expanded", "aria-setsize", "aria-posinset", "aria-level"];
+    const _hoisted_2$1 = ["id", "aria-label", "aria-selected", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset"];
     const _hoisted_3$1 = ["onClick"];
     const _hoisted_4$1 = {
       key: 1,
       class: "p-cascadeselect-item-text"
     };
-    const _hoisted_5$1 = {
-      key: 2,
-      class: "p-cascadeselect-group-icon pi pi-angle-right",
-      "aria-hidden": "true"
-    };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_CascadeSelectSub = vue.resolveComponent("CascadeSelectSub", true);
@@ -108,14 +115,14 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
           return (vue.openBlock(), vue.createElementBlock("li", {
             key: $options.getOptionLabelToRender(processedOption),
             id: $options.getOptionId(processedOption),
-            class: vue.normalizeClass(['p-cascadeselect-item', {'p-cascadeselect-item-group': $options.isOptionGroup(processedOption), 'p-cascadeselect-item-active p-highlight': $options.isOptionActive(processedOption), 'p-focus': $options.isOptionFocused(processedOption), 'p-disabled': $options.isOptionDisabled(processedOption)}]),
+            class: vue.normalizeClass($options.getOptionClass(processedOption)),
             role: "treeitem",
             "aria-label": $options.getOptionLabelToRender(processedOption),
             "aria-selected": $options.isOptionGroup(processedOption) ? undefined : $options.isOptionSelected(processedOption),
             "aria-expanded": $options.isOptionGroup(processedOption) ? $options.isOptionActive(processedOption) : undefined,
-            "aria-setsize": processedOption.length,
-            "aria-posinset": index + 1,
-            "aria-level": $props.level + 1
+            "aria-level": $props.level + 1,
+            "aria-setsize": $props.options.length,
+            "aria-posinset": index + 1
           }, [
             vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
               class: "p-cascadeselect-item-content",
@@ -128,7 +135,11 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                   }, null, 8, ["option"]))
                 : (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString($options.getOptionLabelToRender(processedOption)), 1)),
               ($options.isOptionGroup(processedOption))
-                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$1))
+                ? (vue.openBlock(), vue.createElementBlock("span", {
+                    key: 2,
+                    class: vue.normalizeClass(['p-cascadeselect-group-icon', $props.optionGroupIcon]),
+                    "aria-hidden": "true"
+                  }, null, 2))
                 : vue.createCommentVNode("", true)
             ], 8, _hoisted_3$1)), [
               [_directive_ripple]
@@ -147,10 +158,11 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                   optionLabel: $props.optionLabel,
                   optionValue: $props.optionValue,
                   optionDisabled: $props.optionDisabled,
+                  optionGroupIcon: $props.optionGroupIcon,
                   optionGroupLabel: $props.optionGroupLabel,
                   optionGroupChildren: $props.optionGroupChildren,
                   onOptionChange: $options.onOptionChange
-                }, null, 8, ["selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "onOptionChange"]))
+                }, null, 8, ["selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange"]))
               : vue.createCommentVNode("", true)
           ], 10, _hoisted_2$1))
         }), 128))
@@ -171,15 +183,36 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             optionGroupLabel: null,
             optionGroupChildren: null,
             placeholder: String,
-    		disabled: Boolean,
+            disabled: Boolean,
             dataKey: null,
-            inputId: null,
-            inputStyle: null,
-            inputClass: null,
-            inputProps: null,
-            panelStyle: null,
-            panelClass: null,
-            panelProps: null,
+            inputId: {
+                type: String,
+                default: null
+            },
+            inputClass: {
+                type: String,
+                default: null
+            },
+            inputStyle: {
+                type: null,
+                default: null
+            },
+            inputProps: {
+                type: null,
+                default: null
+            },
+            panelClass: {
+                type: String,
+                default: null
+            },
+            panelStyle: {
+                type: null,
+                default: null
+            },
+            panelProps: {
+                type: null,
+                default: null
+            },
             appendTo: {
                 type: String,
                 default: 'body'
@@ -188,14 +221,26 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 type: Boolean,
                 default: false
             },
+            dropdownIcon: {
+                type: String,
+                default: 'pi pi-chevron-down'
+            },
             loadingIcon: {
                 type: String,
                 default: 'pi pi-spinner pi-spin'
             },
+            optionGroupIcon: {
+                type: String,
+                default: 'pi pi-angle-right'
+            },
             autoOptionFocus: {
                 type: Boolean,
                 default: true
             },
+            selectOnFocus: {
+                type: Boolean,
+                default: false
+            },
             searchLocale: {
                 type: String,
                 default: undefined
@@ -226,7 +271,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             },
             'aria-labelledby': {
                 type: String,
-    			default: null
+                default: null
             },
             'aria-label': {
                 type: String,
@@ -239,17 +284,15 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
         overlay: null,
         searchTimeout: null,
         searchValue: null,
-        selectOnFocus: false,
         focusOnHover: false,
         data() {
             return {
-                id: utils.UniqueComponentId(),
                 focused: false,
                 focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
                 activeOptionPath: [],
                 overlayVisible: false,
                 dirty: false
-            }
+            };
         },
         watch: {
             options() {
@@ -257,7 +300,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             }
         },
         mounted() {
-            this.id = this.$attrs.id || this.id;
+            this.autoUpdateModel();
         },
         beforeUnmount() {
             this.unbindOutsideClickListener();
@@ -294,6 +337,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             },
             getProccessedOptionLabel(processedOption) {
                 const grouped = this.isProccessedOptionGroup(processedOption);
+
                 return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
             },
             isProccessedOptionGroup(processedOption) {
@@ -302,17 +346,17 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             show(isFocus) {
                 this.$emit('before-show');
                 this.overlayVisible = true;
-                this.activeOptionPath = this.findOptionPathByValue(this.modelValue);
+                this.activeOptionPath = this.hasSelectedOption ? this.findOptionPathByValue(this.modelValue) : this.activeOptionPath;
 
                 if (this.hasSelectedOption && utils.ObjectUtils.isNotEmpty(this.activeOptionPath)) {
                     const processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
-                    this.focusedOptionInfo = { index: (this.autoOptionFocus ? processedOption.index : -1), level: processedOption.level, parentKey: processedOption.parentKey };
-                }
-                else {
-                    this.focusedOptionInfo = { index: (this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1), level: 0, parentKey: '' };
+
+                    this.focusedOptionInfo = { index: this.autoOptionFocus ? processedOption.index : -1, level: processedOption.level, parentKey: processedOption.parentKey };
+                } else {
+                    this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };
                 }
 
-                isFocus && this.$refs.focusInput.focus();
+                isFocus && utils.DomHandler.focus(this.$refs.focusInput);
             },
             hide(isFocus) {
                 const _hide = () => {
@@ -321,10 +365,12 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                     this.activeOptionPath = [];
                     this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
 
-                    isFocus && this.$refs.focusInput.focus();
+                    isFocus && utils.DomHandler.focus(this.$refs.focusInput);
                 };
 
-                setTimeout(() => { _hide(); }, 0); // For ScreenReaders
+                setTimeout(() => {
+                    _hide();
+                }, 0); // For ScreenReaders
             },
             onFocus(event) {
                 this.focused = true;
@@ -339,9 +385,12 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             onKeyDown(event) {
                 if (this.disabled || this.loading) {
                     event.preventDefault();
+
                     return;
                 }
 
+                const metaKey = event.metaKey || event.ctrlKey;
+
                 switch (event.code) {
                     case 'ArrowDown':
                         this.onArrowDownKey(event);
@@ -392,7 +441,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                         break;
 
                     default:
-                        if (utils.ObjectUtils.isPrintableCharacter(event.key)) {
+                        if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
                             !this.overlayVisible && this.show();
                             this.searchOptions(event, event.key);
                         }
@@ -401,25 +450,29 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 }
             },
             onOptionChange(event) {
-                const { originalEvent, processedOption, isFocus } = event;
+                const { originalEvent, processedOption, isFocus, isHide } = event;
+
+                if (utils.ObjectUtils.isEmpty(processedOption)) return;
+
                 const { index, level, parentKey, children } = processedOption;
                 const grouped = utils.ObjectUtils.isNotEmpty(children);
 
-                const activeOptionPath = this.activeOptionPath.filter(p => p.parentKey !== parentKey);
+                const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
+
                 activeOptionPath.push(processedOption);
 
                 this.focusedOptionInfo = { index, level, parentKey };
                 this.activeOptionPath = activeOptionPath;
 
-                grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption);
-                isFocus && this.$refs.focusInput.focus();
+                grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
+                isFocus && utils.DomHandler.focus(this.$refs.focusInput);
             },
-            onOptionSelect(event, processedOption) {
+            onOptionSelect(event, processedOption, isHide = true) {
                 const value = this.getOptionValue(processedOption.option);
 
-                this.activeOptionPath.forEach(p => p.selected = true);
+                this.activeOptionPath.forEach((p) => (p.selected = true));
                 this.updateModel(event, value);
-                this.hide(true);
+                isHide && this.hide(true);
             },
             onOptionGroupSelect(event, processedOption) {
                 this.dirty = true;
@@ -432,7 +485,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
 
                 if (!this.overlay || !this.overlay.contains(event.target)) {
                     this.overlayVisible ? this.hide() : this.show();
-                    this.$refs.focusInput.focus();
+                    utils.DomHandler.focus(this.$refs.focusInput);
                 }
 
                 this.$emit('click', event);
@@ -463,13 +516,13 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                     if (this.focusedOptionInfo.index !== -1) {
                         const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
                         const grouped = this.isProccessedOptionGroup(processedOption);
+
                         !grouped && this.onOptionChange({ originalEvent: event, processedOption });
                     }
 
                     this.overlayVisible && this.hide();
                     event.preventDefault();
-                }
-                else {
+                } else {
                     const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.findLastFocusedOptionIndex();
 
                     this.changeFocusedOptionIndex(event, optionIndex);
@@ -481,12 +534,12 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             onArrowLeftKey(event) {
                 if (this.overlayVisible) {
                     const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
-                    const parentOption = this.activeOptionPath.find(p => p.key === processedOption.parentKey);
+                    const parentOption = this.activeOptionPath.find((p) => p.key === processedOption.parentKey);
                     const matched = this.focusedOptionInfo.parentKey === '' || (parentOption && parentOption.key === this.focusedOptionInfo.parentKey);
                     const root = utils.ObjectUtils.isEmpty(processedOption.parent);
 
                     if (matched) {
-                        this.activeOptionPath = this.activeOptionPath.filter(p => p.parentKey !== this.focusedOptionInfo.parentKey);
+                        this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
                     }
 
                     if (!root) {
@@ -504,14 +557,13 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                     const grouped = this.isProccessedOptionGroup(processedOption);
 
                     if (grouped) {
-                        const matched = this.activeOptionPath.some(p => processedOption.key === p.key);
+                        const matched = this.activeOptionPath.some((p) => processedOption.key === p.key);
 
                         if (matched) {
                             this.focusedOptionInfo = { index: -1, parentKey: processedOption.key };
                             this.searchValue = '';
                             this.onArrowDownKey(event);
-                        }
-                        else {
+                        } else {
                             this.onOptionChange({ originalEvent: event, processedOption });
                         }
                     }
@@ -534,8 +586,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             onEnterKey(event) {
                 if (!this.overlayVisible) {
                     this.onArrowDownKey(event);
-                }
-                else {
+                } else {
                     if (this.focusedOptionInfo.index !== -1) {
                         const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
                         const grouped = this.isProccessedOptionGroup(processedOption);
@@ -591,8 +642,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             alignOverlay() {
                 if (this.appendTo === 'self') {
                     utils.DomHandler.relativePosition(this.overlay, this.$el);
-                }
-                else {
+                } else {
                     this.overlay.style.minWidth = utils.DomHandler.getOuterWidth(this.$el) + 'px';
                     utils.DomHandler.absolutePosition(this.overlay, this.$el);
                 }
@@ -604,6 +654,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                             this.hide();
                         }
                     };
+
                     document.addEventListener('click', this.outsideClickListener);
                 }
             },
@@ -636,6 +687,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                             this.hide();
                         }
                     };
+
                     window.addEventListener('resize', this.resizeListener);
                 }
             },
@@ -655,31 +707,35 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 return this.isValidOption(processedOption) && this.isSelected(processedOption);
             },
             isSelected(processedOption) {
-                return this.activeOptionPath.some(p => p.key === processedOption.key);
+                return this.activeOptionPath.some((p) => p.key === processedOption.key);
             },
             findFirstOptionIndex() {
-                return this.visibleOptions.findIndex(processedOption => this.isValidOption(processedOption));
+                return this.visibleOptions.findIndex((processedOption) => this.isValidOption(processedOption));
             },
             findLastOptionIndex() {
-                return utils.ObjectUtils.findLastIndex(this.visibleOptions, processedOption => this.isValidOption(processedOption));
+                return utils.ObjectUtils.findLastIndex(this.visibleOptions, (processedOption) => this.isValidOption(processedOption));
             },
             findNextOptionIndex(index) {
-                const matchedOptionIndex = index < (this.visibleOptions.length - 1) ? this.visibleOptions.slice(index + 1).findIndex(processedOption => this.isValidOption(processedOption)) : -1;
+                const matchedOptionIndex = index < this.visibleOptions.length - 1 ? this.visibleOptions.slice(index + 1).findIndex((processedOption) => this.isValidOption(processedOption)) : -1;
+
                 return matchedOptionIndex > -1 ? matchedOptionIndex + index + 1 : index;
             },
             findPrevOptionIndex(index) {
-                const matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), processedOption => this.isValidOption(processedOption)) : -1;
+                const matchedOptionIndex = index > 0 ? utils.ObjectUtils.findLastIndex(this.visibleOptions.slice(0, index), (processedOption) => this.isValidOption(processedOption)) : -1;
+
                 return matchedOptionIndex > -1 ? matchedOptionIndex : index;
             },
             findSelectedOptionIndex() {
-                return this.visibleOptions.findIndex(processedOption => this.isValidSelectedOption(processedOption));
+                return this.visibleOptions.findIndex((processedOption) => this.isValidSelectedOption(processedOption));
             },
             findFirstFocusedOptionIndex() {
                 const selectedIndex = this.findSelectedOptionIndex();
+
                 return selectedIndex < 0 ? this.findFirstOptionIndex() : selectedIndex;
             },
             findLastFocusedOptionIndex() {
                 const selectedIndex = this.findSelectedOptionIndex();
+
                 return selectedIndex < 0 ? this.findLastOptionIndex() : selectedIndex;
             },
             findOptionPathByValue(value, processedOptions, level = 0) {
@@ -696,6 +752,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                     }
 
                     const matchedOptions = this.findOptionPathByValue(value, processedOption.children, level + 1);
+
                     if (matchedOptions) {
                         matchedOptions.unshift(processedOption);
 
@@ -710,11 +767,10 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 let matched = false;
 
                 if (this.focusedOptionInfo.index !== -1) {
-                    optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex(processedOption => this.isOptionMatched(processedOption));
-                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex(processedOption => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
-                }
-                else {
-                    optionIndex = this.visibleOptions.findIndex(processedOption => this.isOptionMatched(processedOption));
+                    optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption));
+                    optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex((processedOption) => this.isOptionMatched(processedOption)) : optionIndex + this.focusedOptionInfo.index;
+                } else {
+                    optionIndex = this.visibleOptions.findIndex((processedOption) => this.isOptionMatched(processedOption));
                 }
 
                 if (optionIndex !== -1) {
@@ -746,13 +802,14 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                     this.scrollInView();
 
                     if (this.selectOnFocus) {
-                        this.updateModel(event, this.getOptionValue(this.visibleOptions[index]));
+                        this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false });
                     }
                 }
             },
             scrollInView(index = -1) {
                 const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
                 const element = utils.DomHandler.findSingle(this.list, `li[id="${id}"]`);
+
                 if (element) {
                     element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
                 }
@@ -760,8 +817,9 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             autoUpdateModel() {
                 if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
                     this.focusedOptionInfo.index = this.findFirstFocusedOptionIndex();
-                    const value = this.getOptionValue(this.visibleOptions[this.focusedOptionInfo.index]);
-                    this.updateModel(null, value);
+                    this.onOptionChange({ processedOption: this.visibleOptions[this.focusedOptionInfo.index], isHide: false });
+
+                    !this.overlayVisible && (this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' });
                 }
             },
             updateModel(event, value) {
@@ -771,20 +829,21 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             createProcessedOptions(options, level = 0, parent = {}, parentKey = '') {
                 const processedOptions = [];
 
-                options && options.forEach((option, index) => {
-                    const key = (parentKey !== '' ? parentKey + '_' : '') + index;
-                    const newOption = {
-                        option,
-                        index,
-                        level,
-                        key,
-                        parent,
-                        parentKey
-                    };
-
-                    newOption['children'] = this.createProcessedOptions(this.getOptionGroupChildren(option, level), level + 1, newOption, key);
-                    processedOptions.push(newOption);
-                });
+                options &&
+                    options.forEach((option, index) => {
+                        const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                        const newOption = {
+                            option,
+                            index,
+                            level,
+                            key,
+                            parent,
+                            parentKey
+                        };
+
+                        newOption['children'] = this.createProcessedOptions(this.getOptionGroupChildren(option, level), level + 1, newOption, key);
+                        processedOptions.push(newOption);
+                    });
 
                 return processedOptions;
             },
@@ -794,28 +853,38 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
         },
         computed: {
             containerClass() {
-                return ['p-cascadeselect p-component p-inputwrapper', {
-                    'p-disabled': this.disabled,
-                    'p-focus': this.focused,
-                    'p-inputwrapper-filled': this.modelValue,
-                    'p-inputwrapper-focus': this.focused || this.overlayVisible,
-                    'p-overlay-open': this.overlayVisible
-                }];
+                return [
+                    'p-cascadeselect p-component p-inputwrapper',
+                    {
+                        'p-disabled': this.disabled,
+                        'p-focus': this.focused,
+                        'p-inputwrapper-filled': this.modelValue,
+                        'p-inputwrapper-focus': this.focused || this.overlayVisible,
+                        'p-overlay-open': this.overlayVisible
+                    }
+                ];
             },
             labelClass() {
-                return ['p-cascadeselect-label', {
-                    'p-placeholder': this.label === this.placeholder,
-                    'p-cascadeselect-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
-                }];
+                return [
+                    'p-cascadeselect-label p-inputtext',
+                    {
+                        'p-placeholder': this.label === this.placeholder,
+                        'p-cascadeselect-label-empty': !this.$slots['value'] && (this.label === 'p-emptylabel' || this.label.length === 0)
+                    }
+                ];
             },
             panelStyleClass() {
-                return ['p-cascadeselect-panel p-component', this.panelClass, {
-                    'p-input-filled': this.$primevue.config.inputStyle === 'filled',
-                    'p-ripple-disabled': this.$primevue.config.ripple === false
-                }];
+                return [
+                    'p-cascadeselect-panel p-component',
+                    this.panelClass,
+                    {
+                        'p-input-filled': this.$primevue.config.inputStyle === 'filled',
+                        'p-ripple-disabled': this.$primevue.config.ripple === false
+                    }
+                ];
             },
             dropdownIconClass() {
-                return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
+                return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
             },
             hasSelectedOption() {
                 return utils.ObjectUtils.isNotEmpty(this.modelValue);
@@ -825,7 +894,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
 
                 if (this.hasSelectedOption) {
                     const activeOptionPath = this.findOptionPathByValue(this.modelValue);
-                    const processedOption = activeOptionPath.length ? activeOptionPath[activeOptionPath.length - 1] : null;
+                    const processedOption = utils.ObjectUtils.isNotEmpty(activeOptionPath) ? activeOptionPath[activeOptionPath.length - 1] : null;
 
                     return processedOption ? this.getOptionLabel(processedOption.option) : label;
                 }
@@ -836,7 +905,8 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                 return this.createProcessedOptions(this.options || []);
             },
             visibleOptions() {
-                const processedOption = this.activeOptionPath.find(p => p.key === this.focusedOptionInfo.parentKey);
+                const processedOption = this.activeOptionPath.find((p) => p.key === this.focusedOptionInfo.parentKey);
+
                 return processedOption ? processedOption.children : this.processedOptions;
             },
             equalityKey() {
@@ -863,13 +933,16 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             selectedMessageText() {
                 return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', '1') : this.emptySelectionMessageText;
             },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
             focusedOptionId() {
                 return this.focusedOptionInfo.index !== -1 ? `${this.id}${utils.ObjectUtils.isNotEmpty(this.focusedOptionInfo.parentKey) ? '_' + this.focusedOptionInfo.parentKey : ''}_${this.focusedOptionInfo.index}` : null;
             }
         },
         components: {
-            'CascadeSelectSub': script$1,
-            'Portal': Portal__default["default"]
+            CascadeSelectSub: script$1,
+            Portal: Portal__default["default"]
         }
     };
 
@@ -918,7 +991,7 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
             "aria-labelledby": _ctx.ariaLabelledby,
             "aria-haspopup": "tree",
             "aria-expanded": $data.overlayVisible,
-            "aria-controls": $data.id + '_tree',
+            "aria-controls": $options.id + '_tree',
             "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
             onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onFocus && $options.onFocus(...args))),
             onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
@@ -964,10 +1037,10 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                     }, $props.panelProps), [
                       vue.createElementVNode("div", _hoisted_5, [
                         vue.createVNode(_component_CascadeSelectSub, {
-                          id: $data.id + '_tree',
+                          id: $options.id + '_tree',
                           role: "tree",
                           "aria-orientation": "horizontal",
-                          selectId: $data.id,
+                          selectId: $options.id,
                           focusedOptionId: $data.focused ? $options.focusedOptionId : undefined,
                           options: $options.processedOptions,
                           activeOptionPath: $data.activeOptionPath,
@@ -976,10 +1049,11 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
                           optionLabel: $props.optionLabel,
                           optionValue: $props.optionValue,
                           optionDisabled: $props.optionDisabled,
+                          optionGroupIcon: $props.optionGroupIcon,
                           optionGroupLabel: $props.optionGroupLabel,
                           optionGroupChildren: $props.optionGroupChildren,
                           onOptionChange: $options.onOptionChange
-                        }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "onOptionChange"]),
+                        }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange"]),
                         vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.selectedMessageText), 1)
                       ])
                     ], 16))
@@ -1027,4 +1101,4 @@ this.primevue.cascadeselect = (function (utils, OverlayEventBus, Ripple, vue, Po
 
     return script;
 
-})(primevue.utils, primevue.overlayeventbus, primevue.ripple, Vue, primevue.portal);
+})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);