Fixed #6533 - CascadeSelect: move move/enter behavior changes

packages/primevue/src/cascadeselect/CascadeSelect.vue

@@ -72,7 +72,8 @@
                             :optionGroupLabel="optionGroupLabel"
                             :optionGroupChildren="optionGroupChildren"
                             @option-change="onOptionChange"
-                            @option-focus-change="onOptionFocusChange"
+                            @option-focus-move-change="onOptionFocusMoveChange"
+                            @option-focus-enter-change="onOptionFocusChangeEnter"
                             :pt="pt"
                             :unstyled="unstyled"
                         />
@@ -303,25 +304,23 @@ export default {
 
             this.clicked = false;
         },
-        onOptionChange(event) {
+        onOptionChange(event, isSelectable = true) {
             const { originalEvent, processedOption, isFocus, isHide } = event;
 
             if (isEmpty(processedOption)) return;
 
-            const { index, level, parentKey, children } = processedOption;
+            const { index, key, level, parentKey, children } = processedOption;
             const grouped = isNotEmpty(children);
             const root = isEmpty(processedOption.parent);
             const selected = this.isSelected(processedOption);
 
             if (selected) {
-                const { index, key, level, parentKey } = processedOption;
-
                 this.focusedOptionInfo = { index, level, parentKey };
                 this.activeOptionPath = this.activeOptionPath.filter((p) => key !== p.key && key.startsWith(p.key));
 
                 this.dirty = !root;
             } else {
-                const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey);
+                const activeOptionPath = this.activeOptionPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
 
                 activeOptionPath.push(processedOption);
 
@@ -329,10 +328,16 @@ export default {
                 this.activeOptionPath = activeOptionPath;
             }
 
-            grouped ? this.onOptionGroupSelect(originalEvent, processedOption) : this.onOptionSelect(originalEvent, processedOption, isHide);
+            if (grouped) {
+                this.dirty = true;
+                this.onOptionGroupSelect(originalEvent, processedOption);
+            } else {
+                isSelectable && this.onOptionSelect(originalEvent, processedOption, isHide);
+            }
+
             isFocus && focus(this.$refs.focusInput);
         },
-        onOptionFocusChange(event) {
+        onOptionFocusMoveChange(event) {
             if (this.focusOnHover) {
                 const { originalEvent, processedOption } = event;
                 const { index, level, parentKey } = processedOption;
@@ -341,6 +346,11 @@ export default {
                 this.changeFocusedOptionIndex(originalEvent, index);
             }
         },
+        onOptionFocusChangeEnter(event) {
+            if (this.dirty) {
+                this.onOptionChange(event, false);
+            }
+        },
         onOptionSelect(event, processedOption, isHide = true) {
             const value = this.getOptionValue(processedOption?.option);
 

packages/primevue/src/cascadeselect/CascadeSelectSub.vue

@@ -17,7 +17,14 @@
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('optionContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'optionContent')">
+                <div
+                    v-ripple
+                    :class="cx('optionContent')"
+                    @click="onOptionClick($event, processedOption)"
+                    @mouseenter="onOptionMouseEnter($event, processedOption)"
+                    @mousemove="onOptionMouseMove($event, processedOption)"
+                    v-bind="getPTOptions(processedOption, index, 'optionContent')"
+                >
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" :selected="isOptionGroup(processedOption) ? false : isOptionSelected(processedOption)" />
                     <span v-else :class="cx('optionText')" v-bind="getPTOptions(processedOption, index, 'optionText')">{{ getOptionLabelToRender(processedOption) }}</span>
                     <template v-if="isOptionGroup(processedOption)">
@@ -46,6 +53,7 @@
                     :optionGroupChildren="optionGroupChildren"
                     @option-change="onOptionChange"
                     @option-focus-change="onOptionFocusChange"
+                    @option-focus-enter-change="onOptionFocusEnterChange"
                     :pt="pt"
                     :unstyled="unstyled"
                 />
@@ -55,7 +63,6 @@
 </template>
 
 <script>
-import { nestedPosition } from '@primeuix/utils/dom';
 import { isNotEmpty, resolveFieldData } from '@primeuix/utils/object';
 import BaseComponent from '@primevue/core/basecomponent';
 import AngleRightIcon from '@primevue/icons/angleright';
@@ -65,7 +72,7 @@ export default {
     name: 'CascadeSelectSub',
     hostName: 'CascadeSelect',
     extends: BaseComponent,
-    emits: ['option-change', 'option-focus-change'],
+    emits: ['option-change', 'option-focus-change', 'option-focus-enter-change'],
     container: null,
     props: {
         selectId: String,
@@ -82,8 +89,7 @@ export default {
         },
         activeOptionPath: Array,
         level: Number,
-        templates: null,
+        templates: null
-        isParentMount: Boolean
     },
 
     methods: {
@@ -136,6 +142,9 @@ export default {
         onOptionClick(event, processedOption) {
             this.$emit('option-change', { originalEvent: event, processedOption, isFocus: true });
         },
+        onOptionMouseEnter(event, processedOption) {
+            this.$emit('option-focus-enter-change', { originalEvent: event, processedOption });
+        },
         onOptionMouseMove(event, processedOption) {
             this.$emit('option-focus-change', { originalEvent: event, processedOption });
         },
@@ -145,6 +154,9 @@ export default {
         onOptionFocusChange(event) {
             this.$emit('option-focus-change', event);
         },
+        onOptionFocusEnterChange(event) {
+            this.$emit('option-focus-enter-change', event);
+        },
         containerRef(el) {
             this.container = el;
         },