Fixed #5106 - Change visual focus behavior for UI/UX enhancement on some components

components/lib/cascadeselect/CascadeSelect.vue

@@ -153,13 +153,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');
@@ -285,14 +285,14 @@ export default {
 
             activeOptionPath.push(processedOption);
 
-            this.focusedOptionInfo = { index, level, parentKey };
+            this.focusedOptionInfo = originalEvent?.type === 'click' ? { index: -1, level, parentKey } : { index, level, parentKey };
             this.activeOptionPath = activeOptionPath;
 
             grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
             isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         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);
@@ -361,9 +361,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);
@@ -384,10 +384,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 {

components/lib/listbox/Listbox.vue

@@ -306,7 +306,7 @@ export default {
 
             this.multiple ? this.onOptionSelectMultiple(event, option) : this.onOptionSelectSingle(event, option);
             this.optionTouched = false;
-            index !== -1 && (this.focusedOptionIndex = index);
+            index !== -1 && (this.focusedOptionIndex = event?.type === 'click' ? -1 : index);
         },
         onOptionMouseDown(event, index) {
             this.changeFocusedOptionIndex(event, index);

components/lib/multiselect/MultiSelect.vue

@@ -454,7 +454,7 @@ export default {
             else value = [...(this.modelValue || []), this.getOptionValue(option)];
 
             this.updateModel(event, value);
-            index !== -1 && (this.focusedOptionIndex = index);
+            index !== -1 && (this.focusedOptionIndex = event?.type === 'click' ? -1 : index);
             isFocus && DomHandler.focus(this.$refs.focusInput);
         },
         onOptionMouseMove(event, index) {

components/lib/orderlist/OrderList.vue

@@ -431,7 +431,7 @@ export default {
 
             const selectedId = DomHandler.find(this.list, '[data-pc-section="item"]')[index].getAttribute('id');
 
-            this.focusedOptionIndex = selectedId;
+            this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId;
 
             if (metaSelection) {
                 const metaKey = event.metaKey || event.ctrlKey;

components/lib/picklist/PickList.vue

@@ -586,7 +586,7 @@ export default {
             const metaSelection = this.itemTouched ? false : this.metaKeySelection;
             const selectedId = DomHandler.find(this.$refs[listType].$el, '[data-pc-section="item"]')[index].getAttribute('id');
 
-            this.focusedOptionIndex = selectedId;
+            this.focusedOptionIndex = event?.type === 'click' ? -1 : selectedId;
             let _selection;
 
             if (metaSelection) {