Fixed #5288 - Menu components: track focus with also mousemove

primefaces · Feb 15, 2024 · e67efa2 · e67efa2
1 parent 266d501
commit e67efa2
Show file tree

Hide file tree

Showing 10 changed files with 91 additions and 29 deletions.
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
@@ -27,6 +27,7 @@
                     @keydown="onKeyDown"
                     @item-click="onItemClick"
                     @item-mouseenter="onItemMouseEnter"
+                    @item-mousemove="onItemMouseMove"
                 />
             </div>
         </transition>
@@ -247,6 +248,11 @@ export default {
         onItemMouseEnter(event) {
             this.onItemChange(event);
         },
+        onItemMouseMove(event) {
+            if (this.focused) {
+                this.changeFocusedItemIndex(event, event.processedItem.index);
+            }
+        },
         onArrowDownKey(event) {
             const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();
 

diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
@@ -20,7 +20,13 @@
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
-                    <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
+                    <div
+                        :class="cx('content')"
+                        @click="onItemClick($event, processedItem)"
+                        @mouseenter="onItemMouseEnter($event, processedItem)"
+                        @mousemove="onItemMouseMove($event, processedItem)"
+                        v-bind="getPTOptions('content', processedItem, index)"
+                    >
                         <template v-if="!templates.item">
                             <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@@ -50,6 +56,7 @@
                         :unstyled="unstyled"
                         @item-click="$emit('item-click', $event)"
                         @item-mouseenter="$emit('item-mouseenter', $event)"
+                        @item-mousemove="$emit('item-mousemove', $event)"
                         :aria-labelledby="getItemLabelId(processedItem)"
                         v-bind="ptm('submenu')"
                     />
@@ -78,7 +85,7 @@ export default {
     name: 'ContextMenuSub',
     hostName: 'ContextMenu',
     extends: BaseComponent,
-    emits: ['item-click', 'item-mouseenter'],
+    emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
     props: {
         items: {
             type: Array,
@@ -117,9 +124,6 @@ export default {
             default: 0
         }
     },
-    mounted() {
-        console.log(this.templates);
-    },
     methods: {
         getItemId(processedItem) {
             return `${this.menuId}_${processedItem.key}`;
@@ -169,6 +173,9 @@ export default {
         onItemMouseEnter(event, processedItem) {
             this.$emit('item-mouseenter', { originalEvent: event, processedItem });
         },
+        onItemMouseMove(event, processedItem) {
+            this.$emit('item-mousemove', { originalEvent: event, processedItem, isFocus: true });
+        },
         getAriaSetSize() {
             return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },

diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
@@ -25,12 +25,21 @@
                                 <slot name="submenuheader" :item="item">{{ label(item) }}</slot>
                             </li>
                             <template v-for="(child, j) of item.items" :key="child.label + i + '_' + j">
-                                <PVMenuitem v-if="visible(child) && !child.separator" :id="id + '_' + i + '_' + j" :item="child" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
+                                <PVMenuitem
+                                    v-if="visible(child) && !child.separator"
+                                    :id="id + '_' + i + '_' + j"
+                                    :item="child"
+                                    :templates="$slots"
+                                    :focusedOptionId="focusedOptionId"
+                                    @item-click="itemClick"
+                                    @item-mousemove="itemMouseMove"
+                                    :pt="pt"
+                                />
                                 <li v-else-if="visible(child) && child.separator" :key="'separator' + i + j" :class="[cx('separator'), item.class]" :style="child.style" role="separator" v-bind="ptm('separator')"></li>
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" :pt="pt" />
+                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" @item-mousemove="itemMouseMove" :pt="pt" />
                     </template>
                 </ul>
                 <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
@@ -116,15 +125,14 @@ export default {
                 this.focusedOptionIndex = event.id;
             }
         },
+        itemMouseMove(event) {
+            if (this.focused) {
+                this.focusedOptionIndex = event.id;
+            }
+        },
         onListFocus(event) {
             this.focused = true;
-
-            if (!this.popup) {
-                if (this.selectedOptionIndex !== -1) {
-                    this.changeFocusedOptionIndex(this.selectedOptionIndex);
-                    this.selectedOptionIndex = -1;
-                } else this.changeFocusedOptionIndex(0);
-            }
+            !this.popup && this.changeFocusedOptionIndex(0);
 
             this.$emit('focus', event);
         },
@@ -255,7 +263,6 @@ export default {
 
             if (this.popup) {
                 DomHandler.focus(this.list);
-                this.changeFocusedOptionIndex(0);
             }
 
             this.$emit('show');

diff --git a/components/lib/menu/Menuitem.vue b/components/lib/menu/Menuitem.vue
@@ -11,7 +11,7 @@
         :data-p-focused="isItemFocused()"
         :data-p-disabled="disabled() || false"
     >
-        <div :class="cx('content')" @click="onItemClick($event)" v-bind="getPTOptions('content')">
+        <div :class="cx('content')" @click="onItemClick($event)" @mousemove="onItemMouseMove($event)" v-bind="getPTOptions('content')">
             <template v-if="!templates.item">
                 <a v-ripple :href="item.url" :class="cx('action')" :target="item.target" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action')">
                     <component v-if="templates.itemicon" :is="templates.itemicon" :item="item" :class="cx('icon')" />
@@ -35,7 +35,7 @@ export default {
     hostName: 'Menu',
     extends: BaseComponent,
     inheritAttrs: false,
-    emits: ['item-click'],
+    emits: ['item-click', 'item-mousemove'],
     props: {
         item: null,
         templates: null,
@@ -66,6 +66,9 @@ export default {
             command && command({ originalEvent: event, item: this.item.item });
             this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id });
         },
+        onItemMouseMove(event) {
+            this.$emit('item-mousemove', { originalEvent: event, item: this.item, id: this.id });
+        },
         visible() {
             return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
         },

diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
@@ -46,6 +46,7 @@
             @keydown="onKeyDown"
             @item-click="onItemClick"
             @item-mouseenter="onItemMouseEnter"
+            @item-mousemove="onItemMouseMove"
         />
         <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
             <slot name="end"></slot>
@@ -149,8 +150,6 @@ export default {
             event.preventDefault();
         },
         show() {
-            this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
-
             DomHandler.focus(this.menubar);
         },
         hide(event, isFocus) {
@@ -169,7 +168,11 @@ export default {
         },
         onFocus(event) {
             this.focused = true;
-            this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+
+            if (!this.popup) {
+                this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+            }
+
             this.$emit('focus', event);
         },
         onBlur(event) {
@@ -290,6 +293,11 @@ export default {
                 this.onItemChange(event);
             }
         },
+        onItemMouseMove(event) {
+            if (this.focused) {
+                this.changeFocusedItemIndex(event, event.processedItem.index);
+            }
+        },
         menuButtonClick(event) {
             this.toggle(event);
         },

diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
@@ -19,7 +19,7 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
                     <template v-if="!templates.item">
                         <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                             <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@@ -49,6 +49,7 @@
                     :unstyled="unstyled"
                     @item-click="$emit('item-click', $event)"
                     @item-mouseenter="$emit('item-mouseenter', $event)"
+                    @item-mousemove="$emit('item-mousemove', $event)"
                 />
             </li>
             <li
@@ -75,7 +76,7 @@ export default {
     name: 'MenubarSub',
     hostName: 'Menubar',
     extends: BaseComponent,
-    emits: ['item-mouseenter', 'item-click'],
+    emits: ['item-mouseenter', 'item-click', 'item-mousemove'],
     props: {
         items: {
             type: Array,
@@ -165,6 +166,9 @@ export default {
         onItemMouseEnter(event, processedItem) {
             this.$emit('item-mouseenter', { originalEvent: event, processedItem });
         },
+        onItemMouseMove(event, processedItem) {
+            this.$emit('item-mousemove', { originalEvent: event, processedItem });
+        },
         getAriaSetSize() {
             return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },

diff --git a/components/lib/panelmenu/PanelMenuList.vue b/components/lib/panelmenu/PanelMenuList.vue
@@ -14,6 +14,7 @@
         @blur="onBlur"
         @keydown="onKeyDown"
         @item-toggle="onItemToggle"
+        @item-mousemove="onItemMouseMove"
         :pt="pt"
         :unstyled="unstyled"
         v-bind="ptm('menu')"
@@ -225,6 +226,11 @@ export default {
             this.focusedItem = processedItem;
             DomHandler.focus(this.$el);
         },
+        onItemMouseMove(event) {
+            if (this.focused) {
+                this.focusedItem = event.processedItem;
+            }
+        },
         isElementInPanel(event, element) {
             const panel = event.currentTarget.closest('[data-pc-section="panel"]');
 

diff --git a/components/lib/panelmenu/PanelMenuSub.vue b/components/lib/panelmenu/PanelMenuSub.vue
@@ -16,7 +16,7 @@
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
-                <div :class="cx('content')" @click="onItemClick($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
+                <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mousemove="onItemMouseMove($event, processedItem)" v-bind="getPTOptions('content', processedItem, index)">
                     <template v-if="!templates.item">
                         <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('action', processedItem, index)">
                             <template v-if="isItemGroup(processedItem)">
@@ -52,6 +52,7 @@
                             :templates="templates"
                             :activeItemPath="activeItemPath"
                             @item-toggle="onItemToggle"
+                            @item-mousemove="$emit('item-mousemove', $event)"
                             :pt="pt"
                             :unstyled="unstyled"
                             v-bind="ptm('submenu')"
@@ -82,7 +83,7 @@ export default {
     name: 'PanelMenuSub',
     hostName: 'PanelMenu',
     extends: BaseComponent,
-    emits: ['item-toggle'],
+    emits: ['item-toggle', 'item-mousemove'],
     props: {
         panelId: {
             type: String,
@@ -159,6 +160,9 @@ export default {
         onItemToggle(event) {
             this.$emit('item-toggle', event);
         },
+        onItemMouseMove(event, processedItem) {
+            this.$emit('item-mousemove', { originalEvent: event, processedItem });
+        },
         getAriaSetSize() {
             return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },

diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
@@ -29,6 +29,7 @@
                     @keydown="onKeyDown"
                     @item-click="onItemClick"
                     @item-mouseenter="onItemMouseEnter"
+                    @item-mousemove="onItemMouseMove"
                 />
                 <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
                     <slot name="end"></slot>
@@ -137,8 +138,6 @@ export default {
                 this.relatedTarget = event.relatedTarget || null;
             }
 
-            this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
-
             isFocus && DomHandler.focus(this.menubar);
         },
         hide(event, isFocus) {
@@ -155,7 +154,10 @@ export default {
         },
         onFocus(event) {
             this.focused = true;
-            this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+
+            if (!this.popup) {
+                this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+            }
 
             this.$emit('focus', event);
         },
@@ -292,6 +294,11 @@ export default {
                 this.onItemChange(event);
             }
         },
+        onItemMouseMove(event) {
+            if (this.focused) {
+                this.changeFocusedItemIndex(event, event.processedItem.index);
+            }
+        },
         onArrowDownKey(event) {
             const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();
 

diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -20,7 +20,13 @@
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
-                    <div :class="cx('content')" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, index, 'content')">
+                    <div
+                        :class="cx('content')"
+                        @click="onItemClick($event, processedItem)"
+                        @mouseenter="onItemMouseEnter($event, processedItem)"
+                        @mousemove="onItemMouseMove($event, processedItem)"
+                        v-bind="getPTOptions(processedItem, index, 'content')"
+                    >
                         <template v-if="!templates.item">
                             <a v-ripple :href="getItemProp(processedItem, 'url')" :class="cx('action')" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true" v-bind="getPTOptions(processedItem, index, 'action')">
                                 <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="cx('icon')" />
@@ -51,6 +57,7 @@
                         :unstyled="unstyled"
                         @item-click="$emit('item-click', $event)"
                         @item-mouseenter="$emit('item-mouseenter', $event)"
+                        @item-mousemove="$emit('item-mousemove', $event)"
                     />
                 </li>
                 <li
@@ -77,7 +84,7 @@ export default {
     name: 'TieredMenuSub',
     hostName: 'TieredMenu',
     extends: BaseComponent,
-    emits: ['item-click', 'item-mouseenter'],
+    emits: ['item-click', 'item-mouseenter', 'item-mousemove'],
     container: null,
     props: {
         menuId: {
@@ -165,6 +172,9 @@ export default {
         onItemMouseEnter(event, processedItem) {
             this.$emit('item-mouseenter', { originalEvent: event, processedItem });
         },
+        onItemMouseMove(event, processedItem) {
+            this.$emit('item-mousemove', { originalEvent: event, processedItem });
+        },
         getAriaSetSize() {
             return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
         },