From af13f158015ec7a574d3f162201389cfa40a61b5 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 15 Oct 2024 18:13:13 +0300
Subject: [PATCH] Fixed #6578 - MegaMenu: mobile visual defects

---
 packages/primevue/src/megamenu/BaseMegaMenu.vue       | 4 ++++
 packages/primevue/src/megamenu/MegaMenu.d.ts          | 5 +++++
 packages/primevue/src/megamenu/MegaMenu.vue           | 9 ++++-----
 packages/primevue/src/megamenu/style/MegaMenuStyle.js | 7 ++++---
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/packages/primevue/src/megamenu/BaseMegaMenu.vue b/packages/primevue/src/megamenu/BaseMegaMenu.vue
index 9fe4b0b0d..6b5ecc5cb 100644
--- 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
index 7866a0973..6cec2ef38 100755
--- 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
index 5bc0fa463..ecd4a3e6a 100755
--- 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
index 4ba41b365..16d32aab1 100644
--- 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' })
 };