primevue 3.46.0 → 3.47.0

package/cascadeselect/CascadeSelect.vue

@@ -62,6 +62,7 @@
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
                             @option-change="onOptionChange"
+                            @option-focus-change="onOptionFocusChange"
                             :pt="pt"
                             :unstyled="unstyled"
                         />
@@ -95,10 +96,10 @@ export default {
     overlay: null,
     searchTimeout: null,
     searchValue: null,
-    focusOnHover: false,
     data() {
         return {
             id: this.$attrs.id,
+            clicked: false,
             focused: false,
             focusedOptionInfo: { index: -1, level: 0, parentKey: '' },
             activeOptionPath: [],
@@ -116,7 +117,6 @@ export default {
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
-
         this.autoUpdateModel();
     },
     beforeUnmount() {
@@ -152,13 +152,13 @@ export default {
         isOptionGroup(option, level) {
             return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
         },
-        getProccessedOptionLabel(processedOption) {
+        getProccessedOptionLabel(processedOption = {}) {
             const grouped = this.isProccessedOptionGroup(processedOption);
 
             return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
         },
         isProccessedOptionGroup(processedOption) {
-            return ObjectUtils.isNotEmpty(processedOption.children);
+            return ObjectUtils.isNotEmpty(processedOption?.children);
         },
         show(isFocus) {
             this.$emit('before-show');
@@ -168,9 +168,9 @@ export default {
             if (this.hasSelectedOption && 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 };
+                this.focusedOptionInfo = { index: processedOption.index, level: processedOption.level, parentKey: processedOption.parentKey };
             } else {
-                this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1, level: 0, parentKey: '' };
+                this.focusedOptionInfo = { index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(), level: 0, parentKey: '' };
             }
 
             isFocus && DomHandler.focus(this.$refs.focusInput);
@@ -179,6 +179,7 @@ export default {
             const _hide = () => {
                 this.$emit('before-hide');
                 this.overlayVisible = false;
+                this.clicked = false;
                 this.activeOptionPath = [];
                 this.focusedOptionInfo = { index: -1, level: 0, parentKey: '' };
 
@@ -271,6 +272,8 @@ export default {
 
                     break;
             }
+
+            this.clicked = false;
         },
         onOptionChange(event) {
             const { originalEvent, processedOption, isFocus, isHide } = event;
@@ -290,8 +293,17 @@ export default {
             grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
             isFocus && DomHandler.focus(this.$refs.focusInput);
         },
+        onOptionFocusChange(event) {
+            if (this.focusOnHover) {
+                const { originalEvent, processedOption } = event;
+                const { index, level, parentKey } = processedOption;
+
+                this.focusedOptionInfo = { index, level, parentKey };
+                this.changeFocusedOptionIndex(originalEvent, index);
+            }
+        },
         onOptionSelect(event, processedOption, isHide = true) {
-            const value = this.getOptionValue(processedOption.option);
+            const value = this.getOptionValue(processedOption?.option);
 
             this.activeOptionPath.forEach((p) => (p.selected = true));
             this.updateModel(event, value);
@@ -311,6 +323,7 @@ export default {
                 DomHandler.focus(this.$refs.focusInput);
             }
 
+            this.clicked = true;
             this.$emit('click', event);
         },
         onOverlayClick(event) {
@@ -330,11 +343,14 @@ export default {
             }
         },
         onArrowDownKey(event) {
-            const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo.index) : this.findFirstFocusedOptionIndex();
+            if (!this.overlayVisible) {
+                this.show();
+            } else {
+                const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
 
-            this.changeFocusedOptionIndex(event, optionIndex);
+                this.changeFocusedOptionIndex(event, optionIndex);
+            }
 
-            !this.overlayVisible && this.show();
             event.preventDefault();
         },
         onArrowUpKey(event) {
@@ -349,7 +365,7 @@ export default {
                 this.overlayVisible && this.hide();
                 event.preventDefault();
             } else {
-                const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.findLastFocusedOptionIndex();
+                const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
                 this.changeFocusedOptionIndex(event, optionIndex);
 
@@ -360,9 +376,9 @@ export default {
         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 = ObjectUtils.isEmpty(processedOption.parent);
+                const root = ObjectUtils.isEmpty(processedOption?.parent);
 
                 if (matched) {
                     this.activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== this.focusedOptionInfo.parentKey);
@@ -383,10 +399,10 @@ export default {
                 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.focusedOptionInfo = { index: -1, parentKey: processedOption?.key };
                         this.searchValue = '';
                         this.onArrowDownKey(event);
                     } else {
@@ -411,6 +427,7 @@ export default {
         },
         onEnterKey(event) {
             if (!this.overlayVisible) {
+                this.focusedOptionInfo.index !== -1; // reset
                 this.onArrowDownKey(event);
             } else {
                 if (this.focusedOptionInfo.index !== -1) {
@@ -526,7 +543,7 @@ export default {
             }
         },
         isOptionMatched(processedOption) {
-            return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
+            return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption)?.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
         },
         isValidOption(processedOption) {
             return ObjectUtils.isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);
@@ -594,23 +611,25 @@ export default {
             let optionIndex = -1;
             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));
-            }
+            if (ObjectUtils.isNotEmpty(this.searchValue)) {
+                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));
+                }
 
-            if (optionIndex !== -1) {
-                matched = true;
-            }
+                if (optionIndex !== -1) {
+                    matched = true;
+                }
 
-            if (optionIndex === -1 && this.focusedOptionInfo.index === -1) {
-                optionIndex = this.findFirstFocusedOptionIndex();
-            }
+                if (optionIndex === -1 && this.focusedOptionInfo.index === -1) {
+                    optionIndex = this.findFirstFocusedOptionIndex();
+                }
 
-            if (optionIndex !== -1) {
-                this.changeFocusedOptionIndex(event, optionIndex);
+                if (optionIndex !== -1) {
+                    this.changeFocusedOptionIndex(event, optionIndex);
+                }
             }
 
             if (this.searchTimeout) {
@@ -635,12 +654,14 @@ export default {
             }
         },
         scrollInView(index = -1) {
-            const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
-            const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
+            this.$nextTick(() => {
+                const id = index !== -1 ? `${this.id}_${index}` : this.focusedOptionId;
+                const element = DomHandler.findSingle(this.list, `li[id="${id}"]`);
 
-            if (element) {
-                element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
-            }
+                if (element) {
+                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+                }
+            });
         },
         autoUpdateModel() {
             if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {

package/cascadeselect/CascadeSelectSub.vue

@@ -17,7 +17,7 @@
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'content')">
+                <div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'content')">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
                     <span v-else :class="cx('text')" v-bind="getPTOptions(processedOption, index, 'text')">{{ getOptionLabelToRender(processedOption) }}</span>
                     <template v-if="isOptionGroup(processedOption)">
@@ -43,6 +43,7 @@
                     :optionGroupLabel="optionGroupLabel"
                     :optionGroupChildren="optionGroupChildren"
                     @option-change="onOptionChange"
+                    @option-focus-change="onOptionFocusChange"
                     :pt="pt"
                     :unstyled="unstyled"
                     :isParentMount="mounted"
@@ -62,7 +63,7 @@ export default {
     name: 'CascadeSelectSub',
     hostName: 'CascadeSelect',
     extends: BaseComponent,
-    emits: ['option-change'],
+    emits: ['option-change', 'option-focus-change'],
     container: null,
     props: {
         selectId: String,
@@ -149,9 +150,15 @@ export default {
         onOptionClick(event, processedOption) {
             this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });
         },
+        onOptionMouseMove(event, processedOption) {
+            this.$emit('option-focus-change', { originalEvent: event, processedOption });
+        },
         onOptionChange(event) {
             this.$emit('option-change', event);
         },
+        onOptionFocusChange(event) {
+            this.$emit('option-focus-change', event);
+        },
         containerRef(el) {
             this.container = el;
         }

package/cascadeselect/cascadeselect.cjs.js

@@ -86,12 +86,16 @@ var script$2 = {
     },
     autoOptionFocus: {
       type: Boolean,
-      "default": true
+      "default": false
     },
     selectOnFocus: {
       type: Boolean,
       "default": false
     },
+    focusOnHover: {
+      type: Boolean,
+      "default": true
+    },
     searchLocale: {
       type: String,
       "default": undefined
@@ -141,7 +145,7 @@ var script$1 = {
   name: 'CascadeSelectSub',
   hostName: 'CascadeSelect',
   "extends": BaseComponent__default["default"],
-  emits: ['option-change'],
+  emits: ['option-change', 'option-focus-change'],
   container: null,
   props: {
     selectId: String,
@@ -234,9 +238,18 @@ var script$1 = {
         isFocus: true
       });
     },
+    onOptionMouseMove: function onOptionMouseMove(event, processedOption) {
+      this.$emit('option-focus-change', {
+        originalEvent: event,
+        processedOption: processedOption
+      });
+    },
     onOptionChange: function onOptionChange(event) {
       this.$emit('option-change', event);
     },
+    onOptionFocusChange: function onOptionFocusChange(event) {
+      this.$emit('option-focus-change', event);
+    },
     containerRef: function containerRef(el) {
       this.container = el;
     }
@@ -250,7 +263,7 @@ var script$1 = {
 };
 
 var _hoisted_1$1 = ["id", "aria-label", "aria-selected", "aria-expanded", "aria-level", "aria-setsize", "aria-posinset", "data-p-item-group", "data-p-highlight", "data-p-focus", "data-p-disabled"];
-var _hoisted_2 = ["onClick"];
+var _hoisted_2 = ["onClick", "onMousemove"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   var _component_AngleRightIcon = vue.resolveComponent("AngleRightIcon");
   var _component_CascadeSelectSub = vue.resolveComponent("CascadeSelectSub", true);
@@ -281,6 +294,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       "class": _ctx.cx('content'),
       onClick: function onClick($event) {
         return $options.onOptionClick($event, processedOption);
+      },
+      onMousemove: function onMousemove($event) {
+        return $options.onOptionMouseMove($event, processedOption);
       }
     }, $options.getPTOptions(processedOption, index, 'content')), [$props.templates['option'] ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['option']), {
       key: 0,
@@ -318,10 +334,11 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       optionGroupLabel: $props.optionGroupLabel,
       optionGroupChildren: $props.optionGroupChildren,
       onOptionChange: $options.onOptionChange,
+      onOptionFocusChange: $options.onOptionFocusChange,
       pt: _ctx.pt,
       unstyled: _ctx.unstyled,
       isParentMount: $data.mounted
-    }, null, 8, ["class", "selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "pt", "unstyled", "isParentMount"])) : vue.createCommentVNode("", true)], 16, _hoisted_1$1);
+    }, null, 8, ["class", "selectId", "focusedOptionId", "options", "activeOptionPath", "level", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusChange", "pt", "unstyled", "isParentMount"])) : vue.createCommentVNode("", true)], 16, _hoisted_1$1);
   }), 128))], 16);
 }
 
@@ -337,10 +354,10 @@ var script = {
   overlay: null,
   searchTimeout: null,
   searchValue: null,
-  focusOnHover: false,
   data: function data() {
     return {
       id: this.$attrs.id,
+      clicked: false,
       focused: false,
       focusedOptionInfo: {
         index: -1,
@@ -395,12 +412,13 @@ var script = {
     isOptionGroup: function isOptionGroup(option, level) {
       return Object.prototype.hasOwnProperty.call(option, this.optionGroupChildren[level]);
     },
-    getProccessedOptionLabel: function getProccessedOptionLabel(processedOption) {
+    getProccessedOptionLabel: function getProccessedOptionLabel() {
+      var processedOption = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var grouped = this.isProccessedOptionGroup(processedOption);
       return grouped ? this.getOptionGroupLabel(processedOption.option, processedOption.level) : this.getOptionLabel(processedOption.option);
     },
     isProccessedOptionGroup: function isProccessedOptionGroup(processedOption) {
-      return utils.ObjectUtils.isNotEmpty(processedOption.children);
+      return utils.ObjectUtils.isNotEmpty(processedOption === null || processedOption === void 0 ? void 0 : processedOption.children);
     },
     show: function show(isFocus) {
       this.$emit('before-show');
@@ -409,13 +427,13 @@ var script = {
       if (this.hasSelectedOption && utils.ObjectUtils.isNotEmpty(this.activeOptionPath)) {
         var processedOption = this.activeOptionPath[this.activeOptionPath.length - 1];
         this.focusedOptionInfo = {
-          index: this.autoOptionFocus ? processedOption.index : -1,
+          index: processedOption.index,
           level: processedOption.level,
           parentKey: processedOption.parentKey
         };
       } else {
         this.focusedOptionInfo = {
-          index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1,
+          index: this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : this.findSelectedOptionIndex(),
           level: 0,
           parentKey: ''
         };
@@ -427,6 +445,7 @@ var script = {
       var _hide = function _hide() {
         _this.$emit('before-hide');
         _this.overlayVisible = false;
+        _this.clicked = false;
         _this.activeOptionPath = [];
         _this.focusedOptionInfo = {
           index: -1,
@@ -509,6 +528,7 @@ var script = {
           }
           break;
       }
+      this.clicked = false;
     },
     onOptionChange: function onOptionChange(event) {
       var originalEvent = event.originalEvent,
@@ -534,9 +554,24 @@ var script = {
       grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
       isFocus && utils.DomHandler.focus(this.$refs.focusInput);
     },
+    onOptionFocusChange: function onOptionFocusChange(event) {
+      if (this.focusOnHover) {
+        var originalEvent = event.originalEvent,
+          processedOption = event.processedOption;
+        var index = processedOption.index,
+          level = processedOption.level,
+          parentKey = processedOption.parentKey;
+        this.focusedOptionInfo = {
+          index: index,
+          level: level,
+          parentKey: parentKey
+        };
+        this.changeFocusedOptionIndex(originalEvent, index);
+      }
+    },
     onOptionSelect: function onOptionSelect(event, processedOption) {
       var isHide = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var value = this.getOptionValue(processedOption.option);
+      var value = this.getOptionValue(processedOption === null || processedOption === void 0 ? void 0 : processedOption.option);
       this.activeOptionPath.forEach(function (p) {
         return p.selected = true;
       });
@@ -558,6 +593,7 @@ var script = {
         this.overlayVisible ? this.hide() : this.show();
         utils.DomHandler.focus(this.$refs.focusInput);
       }
+      this.clicked = true;
       this.$emit('click', event);
     },
     onOverlayClick: function onOverlayClick(event) {
@@ -574,9 +610,12 @@ var script = {
       }
     },
     onArrowDownKey: function onArrowDownKey(event) {
-      var optionIndex = this.focusedOptionInfo.index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo.index) : this.findFirstFocusedOptionIndex();
-      this.changeFocusedOptionIndex(event, optionIndex);
-      !this.overlayVisible && this.show();
+      if (!this.overlayVisible) {
+        this.show();
+      } else {
+        var optionIndex = this.focusedOptionInfo.index !== -1 ? this.findNextOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findFirstOptionIndex() : this.findFirstFocusedOptionIndex();
+        this.changeFocusedOptionIndex(event, optionIndex);
+      }
       event.preventDefault();
     },
     onArrowUpKey: function onArrowUpKey(event) {
@@ -592,7 +631,7 @@ var script = {
         this.overlayVisible && this.hide();
         event.preventDefault();
       } else {
-        var optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.findLastFocusedOptionIndex();
+        var optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
         this.changeFocusedOptionIndex(event, optionIndex);
         !this.overlayVisible && this.show();
         event.preventDefault();
@@ -603,10 +642,10 @@ var script = {
       if (this.overlayVisible) {
         var processedOption = this.visibleOptions[this.focusedOptionInfo.index];
         var parentOption = this.activeOptionPath.find(function (p) {
-          return p.key === processedOption.parentKey;
+          return p.key === (processedOption === null || processedOption === void 0 ? void 0 : processedOption.parentKey);
         });
         var matched = this.focusedOptionInfo.parentKey === '' || parentOption && parentOption.key === this.focusedOptionInfo.parentKey;
-        var root = utils.ObjectUtils.isEmpty(processedOption.parent);
+        var root = utils.ObjectUtils.isEmpty(processedOption === null || processedOption === void 0 ? void 0 : processedOption.parent);
         if (matched) {
           this.activeOptionPath = this.activeOptionPath.filter(function (p) {
             return p.parentKey !== _this2.focusedOptionInfo.parentKey;
@@ -629,12 +668,12 @@ var script = {
         var grouped = this.isProccessedOptionGroup(processedOption);
         if (grouped) {
           var matched = this.activeOptionPath.some(function (p) {
-            return processedOption.key === p.key;
+            return (processedOption === null || processedOption === void 0 ? void 0 : processedOption.key) === p.key;
           });
           if (matched) {
             this.focusedOptionInfo = {
               index: -1,
-              parentKey: processedOption.key
+              parentKey: processedOption === null || processedOption === void 0 ? void 0 : processedOption.key
             };
             this.searchValue = '';
             this.onArrowDownKey(event);
@@ -660,6 +699,7 @@ var script = {
     },
     onEnterKey: function onEnterKey(event) {
       if (!this.overlayVisible) {
+        this.focusedOptionInfo.index !== -1; // reset
         this.onArrowDownKey(event);
       } else {
         if (this.focusedOptionInfo.index !== -1) {
@@ -778,7 +818,8 @@ var script = {
       }
     },
     isOptionMatched: function isOptionMatched(processedOption) {
-      return this.isValidOption(processedOption) && this.getProccessedOptionLabel(processedOption).toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale));
+      var _this$getProccessedOp;
+      return this.isValidOption(processedOption) && ((_this$getProccessedOp = this.getProccessedOptionLabel(processedOption)) === null || _this$getProccessedOp === void 0 ? void 0 : _this$getProccessedOp.toLocaleLowerCase(this.searchLocale).startsWith(this.searchValue.toLocaleLowerCase(this.searchLocale)));
     },
     isValidOption: function isValidOption(processedOption) {
       return utils.ObjectUtils.isNotEmpty(processedOption) && !this.isOptionDisabled(processedOption.option);
@@ -853,26 +894,28 @@ var script = {
       this.searchValue = (this.searchValue || '') + _char;
       var optionIndex = -1;
       var matched = false;
-      if (this.focusedOptionInfo.index !== -1) {
-        optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex(function (processedOption) {
-          return _this11.isOptionMatched(processedOption);
-        });
-        optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex(function (processedOption) {
-          return _this11.isOptionMatched(processedOption);
-        }) : optionIndex + this.focusedOptionInfo.index;
-      } else {
-        optionIndex = this.visibleOptions.findIndex(function (processedOption) {
-          return _this11.isOptionMatched(processedOption);
-        });
-      }
-      if (optionIndex !== -1) {
-        matched = true;
-      }
-      if (optionIndex === -1 && this.focusedOptionInfo.index === -1) {
-        optionIndex = this.findFirstFocusedOptionIndex();
-      }
-      if (optionIndex !== -1) {
-        this.changeFocusedOptionIndex(event, optionIndex);
+      if (utils.ObjectUtils.isNotEmpty(this.searchValue)) {
+        if (this.focusedOptionInfo.index !== -1) {
+          optionIndex = this.visibleOptions.slice(this.focusedOptionInfo.index).findIndex(function (processedOption) {
+            return _this11.isOptionMatched(processedOption);
+          });
+          optionIndex = optionIndex === -1 ? this.visibleOptions.slice(0, this.focusedOptionInfo.index).findIndex(function (processedOption) {
+            return _this11.isOptionMatched(processedOption);
+          }) : optionIndex + this.focusedOptionInfo.index;
+        } else {
+          optionIndex = this.visibleOptions.findIndex(function (processedOption) {
+            return _this11.isOptionMatched(processedOption);
+          });
+        }
+        if (optionIndex !== -1) {
+          matched = true;
+        }
+        if (optionIndex === -1 && this.focusedOptionInfo.index === -1) {
+          optionIndex = this.findFirstFocusedOptionIndex();
+        }
+        if (optionIndex !== -1) {
+          this.changeFocusedOptionIndex(event, optionIndex);
+        }
       }
       if (this.searchTimeout) {
         clearTimeout(this.searchTimeout);
@@ -897,15 +940,18 @@ var script = {
       }
     },
     scrollInView: function scrollInView() {
+      var _this12 = this;
       var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : -1;
-      var id = index !== -1 ? "".concat(this.id, "_").concat(index) : this.focusedOptionId;
-      var element = utils.DomHandler.findSingle(this.list, "li[id=\"".concat(id, "\"]"));
-      if (element) {
-        element.scrollIntoView && element.scrollIntoView({
-          block: 'nearest',
-          inline: 'start'
-        });
-      }
+      this.$nextTick(function () {
+        var id = index !== -1 ? "".concat(_this12.id, "_").concat(index) : _this12.focusedOptionId;
+        var element = utils.DomHandler.findSingle(_this12.list, "li[id=\"".concat(id, "\"]"));
+        if (element) {
+          element.scrollIntoView && element.scrollIntoView({
+            block: 'nearest',
+            inline: 'start'
+          });
+        }
+      });
     },
     autoUpdateModel: function autoUpdateModel() {
       if (this.selectOnFocus && this.autoOptionFocus && !this.hasSelectedOption) {
@@ -929,7 +975,7 @@ var script = {
       });
     },
     createProcessedOptions: function createProcessedOptions(options) {
-      var _this12 = this;
+      var _this13 = this;
       var level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
       var parent = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
       var parentKey = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '';
@@ -944,7 +990,7 @@ var script = {
           parent: parent,
           parentKey: parentKey
         };
-        newOption['children'] = _this12.createProcessedOptions(_this12.getOptionGroupChildren(option, level), level + 1, newOption, key);
+        newOption['children'] = _this13.createProcessedOptions(_this13.getOptionGroupChildren(option, level), level + 1, newOption, key);
         processedOptions.push(newOption);
       });
       return processedOptions;
@@ -970,9 +1016,9 @@ var script = {
       return this.createProcessedOptions(this.options || []);
     },
     visibleOptions: function visibleOptions() {
-      var _this13 = this;
+      var _this14 = this;
       var processedOption = this.activeOptionPath.find(function (p) {
-        return p.key === _this13.focusedOptionInfo.parentKey;
+        return p.key === _this14.focusedOptionInfo.parentKey;
       });
       return processedOption ? processedOption.children : this.processedOptions;
     },
@@ -1145,9 +1191,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
             optionGroupLabel: _ctx.optionGroupLabel,
             optionGroupChildren: _ctx.optionGroupChildren,
             onOptionChange: $options.onOptionChange,
+            onOptionFocusChange: $options.onOptionFocusChange,
             pt: _ctx.pt,
             unstyled: _ctx.unstyled
-          }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "pt", "unstyled"])], 16), vue.createElementVNode("span", vue.mergeProps({
+          }, null, 8, ["id", "selectId", "focusedOptionId", "options", "activeOptionPath", "templates", "optionLabel", "optionValue", "optionDisabled", "optionGroupIcon", "optionGroupLabel", "optionGroupChildren", "onOptionChange", "onOptionFocusChange", "pt", "unstyled"])], 16), vue.createElementVNode("span", vue.mergeProps({
             role: "status",
             "aria-live": "polite",
             "class": "p-hidden-accessible"