From 7b8d06c429905a1cdf930b498d16faa3e5665a3a Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 11 Oct 2024 16:04:48 +0300
Subject: [PATCH] Refactor #6538

---
 .../src/cascadeselect/CascadeSelect.vue       | 22 +++++++++++++------
 .../cascadeselect/style/CascadeSelectStyle.js |  6 ++---
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/primevue/src/cascadeselect/CascadeSelect.vue b/packages/primevue/src/cascadeselect/CascadeSelect.vue
index db5b6fb9c..f81b3d07a 100644
--- a/packages/primevue/src/cascadeselect/CascadeSelect.vue
+++ b/packages/primevue/src/cascadeselect/CascadeSelect.vue
@@ -320,7 +320,7 @@ export default {
             this.focusedOptionInfo = { index, level, parentKey };
             this.activeOptionPath = activeOptionPath;
         },
-        onOptionClick(event) {
+        onOptionClick(event, preventSelection) {
             const { originalEvent, processedOption, isFocus, isHide } = event;
             const { index, key, level, parentKey } = processedOption;
             const grouped = this.isProccessedOptionGroup(processedOption);
@@ -332,17 +332,21 @@ export default {
             } else {
                 if (grouped) {
                     this.onOptionChange(event);
+                    this.onOptionGroupSelect(originalEvent, processedOption);
                 } else {
                     const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
 
                     activeOptionPath.push(processedOption);
 
                     this.focusedOptionInfo = { index, level, parentKey };
-                    this.activeOptionPath = activeOptionPath;
+
+                    if (!preventSelection || processedOption?.children.length !== 0) {
+                        this.activeOptionPath = activeOptionPath;
+                        this.onOptionSelect(originalEvent, processedOption, isHide);
+                    }
                 }
             }
 
-            grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
             isFocus && focus(this.$refs.focusInput);
         },
         onOptionMouseEnter(event) {
@@ -405,7 +409,7 @@ export default {
             } 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, true);
             }
 
             event.preventDefault();
@@ -424,7 +428,7 @@ export default {
             } else {
                 const optionIndex = this.focusedOptionInfo.index !== -1 ? this.findPrevOptionIndex(this.focusedOptionInfo.index) : this.clicked ? this.findLastOptionIndex() : this.findLastFocusedOptionIndex();
 
-                this.changeFocusedOptionIndex(event, optionIndex);
+                this.changeFocusedOptionIndex(event, optionIndex, true);
 
                 !this.overlayVisible && this.show();
                 event.preventDefault();
@@ -491,7 +495,7 @@ export default {
                     const processedOption = this.visibleOptions[this.focusedOptionInfo.index];
                     const grouped = this.isProccessedOptionGroup(processedOption);
 
-                    this.onOptionChange({ originalEvent: event, processedOption });
+                    this.onOptionClick({ originalEvent: event, processedOption }, false);
                     !grouped && this.hide();
                 }
             }
@@ -721,11 +725,15 @@ export default {
 
             return matched;
         },
-        changeFocusedOptionIndex(event, index) {
+        changeFocusedOptionIndex(event, index, preventSelection) {
             if (this.focusedOptionInfo.index !== index) {
                 this.focusedOptionInfo.index = index;
                 this.scrollInView();
 
+                if (this.focusOnHover) {
+                    this.onOptionClick({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false }, preventSelection);
+                }
+
                 if (this.selectOnFocus) {
                     this.onOptionChange({ originalEvent: event, processedOption: this.visibleOptions[index], isHide: false });
                 }
diff --git a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
index 58150bf56..e31ee8c2b 100644
--- a/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
+++ b/packages/primevue/src/cascadeselect/style/CascadeSelectStyle.js
@@ -136,9 +136,6 @@ const theme = ({ dt }) => `
     border: 0 none;
     color: ${dt('cascadeselect.option.color')};
     background: transparent;
-    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt(
-    'cascadeselect.transition.duration'
-)}, outline-color ${dt('cascadeselect.transition.duration')};
     border-radius: ${dt('cascadeselect.option.border.radius')};
 }
 
@@ -183,6 +180,9 @@ const theme = ({ dt }) => `
     position: relative;
     padding: ${dt('cascadeselect.option.padding')};
     border-radius: ${dt('cascadeselect.option.border.radius')};
+    transition: background ${dt('cascadeselect.transition.duration')}, color ${dt('cascadeselect.transition.duration')}, border-color ${dt('cascadeselect.transition.duration')}, box-shadow ${dt(
+    'cascadeselect.transition.duration'
+)}, outline-color ${dt('cascadeselect.transition.duration')};
 }
 
 .p-cascadeselect-group-icon {