Refactor #3020

primefaces · Oct 19, 2022 · 66f19bd · 66f19bd
1 parent e42c9e7
commit 66f19bd
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 15 deletions.
diff --git a/src/components/menubar/Menubar.vue b/src/components/menubar/Menubar.vue
@@ -84,21 +84,25 @@ export default {
             mobileActive: false,
             focused: false,
             focusedItemInfo: { index: -1, level: 0, parentKey: '' },
-            activeItemPath: []
+            activeItemPath: [],
+            dirty: false
         };
     },
     watch: {
         activeItemPath(newPath) {
             if (ObjectUtils.isNotEmpty(newPath)) {
                 this.bindOutsideClickListener();
+                this.bindResizeListener();
             } else {
                 this.unbindOutsideClickListener();
+                this.unbindResizeListener();
             }
         }
     },
     beforeUnmount() {
         this.mobileActive = false;
         this.unbindOutsideClickListener();
+        this.unbindResizeListener();
 
         if (this.container) {
             ZIndexUtils.clear(this.container);
@@ -154,6 +158,7 @@ export default {
             this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
 
             isFocus && DomHandler.focus(this.menubar);
+            this.dirty = false;
         },
         onFocus(event) {
             this.focused = true;
@@ -164,6 +169,7 @@ export default {
             this.focused = false;
             this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
             this.searchValue = '';
+            this.dirty = false;
             this.$emit('blur', event);
         },
         onKeyDown(event) {
@@ -240,21 +246,34 @@ export default {
             this.focusedItemInfo = { index, level, parentKey };
             this.activeItemPath = activeItemPath;
 
+            grouped && (this.dirty = true);
             isFocus && DomHandler.focus(this.menubar);
         },
         onItemClick(event) {
             const { originalEvent, processedItem } = event;
             const grouped = this.isProccessedItemGroup(processedItem);
+            const root = ObjectUtils.isEmpty(processedItem.parent);
+            const selected = this.isSelected(processedItem);
 
-            if (grouped) {
-                this.onItemChange(event);
+            if (selected) {
+                const { index, key, level, parentKey } = processedItem;
+
+                this.activeItemPath = this.activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key));
+                this.focusedItemInfo = { index, level, parentKey };
+
+                !root && (this.dirty = true);
+                DomHandler.focus(this.menubar);
             } else {
-                this.hide(originalEvent, true);
-                this.mobileActive = false;
+                if (grouped) {
+                    this.onItemChange(event);
+                } else {
+                    this.hide(originalEvent, true);
+                    this.mobileActive = false;
+                }
             }
         },
         onItemMouseEnter(event) {
-            if (ObjectUtils.isNotEmpty(this.activeItemPath)) {
+            if (!this.mobileActive && this.dirty) {
                 this.onItemChange(event);
             }
         },
@@ -369,7 +388,11 @@ export default {
                 const anchorElement = element && DomHandler.findSingle(element, '.p-menuitem-action');
 
                 anchorElement ? anchorElement.click() : element && element.click();
-                this.focusedItemInfo.index = this.findFirstFocusedItemIndex();
+
+                const processedItem = this.visibleItems[this.focusedItemInfo.index];
+                const grouped = this.isProccessedItemGroup(processedItem);
+
+                !grouped && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
             }
 
             event.preventDefault();
@@ -396,9 +419,12 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    if (this.mobileActive && this.menubar !== event.target && !this.menubar.contains(event.target) && this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target)) {
-                        this.mobileActive = false;
-                    } else this.hide();
+                    const isOutsideContainer = this.menubar !== event.target && !this.menubar.contains(event.target);
+                    const isOutsideMenuButton = this.mobileActive && this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target);
+
+                    if (isOutsideContainer) {
+                        isOutsideMenuButton ? (this.mobileActive = false) : this.hide();
+                    }
                 };
 
                 document.addEventListener('click', this.outsideClickListener);
@@ -410,6 +436,25 @@ export default {
                 this.outsideClickListener = null;
             }
         },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = (event) => {
+                    if (!DomHandler.isTouchDevice()) {
+                        this.hide(event, true);
+                    }
+
+                    this.mobileActive = false;
+                };
+
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
         isItemMatched(processedItem) {
             return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
         },

diff --git a/src/components/menubar/MenubarSub.vue b/src/components/menubar/MenubarSub.vue
@@ -14,10 +14,8 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
-                @click="onItemClick($event, processedItem)"
-                @mouseenter="onItemMouseEnter($event, processedItem)"
             >
-                <div class="p-menuitem-content">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
                     <template v-if="!template">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
                             <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" :aria-hidden="true" @click="onItemActionClick($event, navigate)">
@@ -137,8 +135,6 @@ export default {
 
             command && command({ originalEvent: event, item: processedItem.item });
             this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });
-
-            event.stopPropagation();
         },
         onItemMouseEnter(event, processedItem) {
             this.$emit('item-mouseenter', { originalEvent: event, processedItem });