Fixed #6578 - MegaMenu: mobile visual defects

primefaces · Oct 15, 2024 · af13f15 · af13f15
1 parent fb01760
commit af13f15
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 8 deletions.
diff --git a/packages/primevue/src/megamenu/BaseMegaMenu.vue b/packages/primevue/src/megamenu/BaseMegaMenu.vue
@@ -26,6 +26,10 @@ export default {
             type: Number,
             default: 0
         },
+        scrollHeight: {
+            type: String,
+            default: '20rem'
+        },
         ariaLabelledby: {
             type: String,
             default: null

diff --git a/packages/primevue/src/megamenu/MegaMenu.d.ts b/packages/primevue/src/megamenu/MegaMenu.d.ts
@@ -261,6 +261,11 @@ export interface MegaMenuProps {
      * Index of the element in tabbing order.
      */
     tabindex?: number | string | undefined;
+    /**
+     * Height of the viewport, a scrollbar is defined if height of list exceeds this value.
+     * @defaultValue 20rem
+     */
+    scrollHeight?: string | undefined;
     /**
      * Defines a string value that labels an interactive element.
      */

diff --git a/packages/primevue/src/megamenu/MegaMenu.vue b/packages/primevue/src/megamenu/MegaMenu.vue
@@ -43,6 +43,7 @@
             :activeItem="activeItem"
             :mobileActive="mobileActive"
             :level="0"
+            :style="sx('rootList')"
             :pt="pt"
             :unstyled="unstyled"
             @focus="onFocus"
@@ -164,9 +165,8 @@ export default {
             if (this.mobileActive) {
                 this.mobileActive = false;
                 setTimeout(() => {
-                    focus(this.$refs.menubutton);
-                    this.scrollInView();
-                }, 100);
+                    focus(this.$refs.menubutton, { preventScroll: true });
+                }, 1);
             }
 
             this.activeItem = null;
@@ -290,8 +290,7 @@ export default {
                 this.dirty = !root;
 
                 if (!this.mobileActive) {
-                    focus(this.menubar);
-                    this.menubar.scrollIntoView && this.menubar.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+                    focus(this.menubar, { preventScroll: true });
                 }
             } else {
                 if (grouped) {

diff --git a/packages/primevue/src/megamenu/style/MegaMenuStyle.js b/packages/primevue/src/megamenu/style/MegaMenuStyle.js
@@ -29,7 +29,7 @@ const theme = ({ dt }) => `
     gap: ${dt('megamenu.gap')};
 }
 
-.p-megamenu-root-list > .p-megamenu-item > .p-menumegamenubar-item-content {
+.p-megamenu-root-list > .p-megamenu-item > .p-menumega-item-content {
     border-radius: ${dt('megamenu.base.item.border.radius')};
 }
 
@@ -271,11 +271,11 @@ const theme = ({ dt }) => `
     gap: ${dt('megamenu.submenu.gap')};
     background: ${dt('megamenu.overlay.background')};
     border: 1px solid ${dt('megamenu.overlay.border.color')};
-    box-shadow: ${dt('menubar.overlay.shadow')};
+    box-shadow: ${dt('megamenu.overlay.shadow')};
 }
 
 .p-megamenu-mobile-active .p-megamenu-root-list {
-    display: flex;
+    display: block;
 }
 
 .p-megamenu-mobile .p-megamenu-root-list .p-megamenu-item {
@@ -307,6 +307,7 @@ const theme = ({ dt }) => `
 `;
 
 const inlineStyles = {
+    rootList: ({ props }) => ({ 'max-height': props.scrollHeight, overflow: 'auto' }),
     submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
 };