fix: overflow menu with 3 level nested options display issue (#18462)

carbon-design-system · Jan 31, 2025 · d975d04 · d975d04
1 parent 21d0e46
commit d975d04
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js b/packages/react/src/components/OverflowMenu/OverflowMenu.featureflag.stories.js
@@ -78,7 +78,12 @@ export const Nested = () => {
         <MenuItem label="Level 1" />
         <MenuItem label="Level 1" />
         <MenuItem label="Level 1">
-          <MenuItem label="Level 2" />
+          <MenuItem label="Level 2">
+            <MenuItem label="Level 3" />
+            <MenuItem label="Level 3">
+              <MenuItem label="Level 4" />
+            </MenuItem>
+          </MenuItem>
           <MenuItem label="Level 2" />
           <MenuItem label="Level 2" />
         </MenuItem>

diff --git a/packages/styles/scss/components/menu/_menu.scss b/packages/styles/scss/components/menu/_menu.scss
@@ -56,6 +56,7 @@
   }
 
   .#{$prefix}--menu--shown {
+    overflow: visible;
     opacity: 1;
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,6 +56,7 @@ @@
       }
       .#{$prefix}--menu--shown {
+        overflow: visible;
         opacity: 1;
       }
@@ Expand Down @@