fix: incorrect z-index in fast-menu slot='submenu' (#5452)

* fix: incorrect z-index in fast-menu slot='submenu' * Correcting menu-item z-index fighting * Undoing some position tests
microsoft · Dec 10, 2021 · 66dca80 · 66dca80
1 parent ac66488
commit 66dca80
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 0 deletions.
diff --git a/change/@microsoft-fast-components-7253ee5c-f527-43d3-a800-4e3bee4d3030.json b/change/@microsoft-fast-components-7253ee5c-f527-43d3-a800-4e3bee4d3030.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: incorrect z-index in fast-menu slot=\"submenu\"",
+  "packageName": "@microsoft/fast-components",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts b/packages/web-components/fast-components/src/menu-item/menu-item.styles.ts
@@ -60,6 +60,11 @@ export const menuItemStyles: (
         border: calc(${focusStrokeWidth} * 1px) solid transparent;
     }
 
+    :host(:hover) {
+        position: relative;
+        z-index: 1;
+    }
+
     :host(.indent-0) {
         grid-template-columns: auto 1fr minmax(42px, auto);
     }

diff --git a/packages/web-components/fast-components/src/menu/fixtures/menu.html b/packages/web-components/fast-components/src/menu/fixtures/menu.html
@@ -308,3 +308,98 @@ <h4>With radio buttons and checkboxes</h4>
         </svg>
     </fast-menu-item>
 </fast-menu>
+
+<h4>Z-index handling</h4>
+<style>
+    .flex-menus {
+        display: flex;
+    }
+
+    .flex-menus > fast-menu {
+        width: 370px;
+    }
+
+    .flex-menus fast-menu-item {
+        z-index: 3;
+    }
+
+    .flex-menus > * + * {
+        margin: 0 0 0 10px;
+    }
+
+    .flex-menus > div {
+        width: 250px;
+        height: 250px;
+        padding: 20px;
+        box-sizing: border-box;
+        background: var(--neutral-layer-floating);
+        color: var(--neutral-foreground-rest);
+        font-family: var(--body-font);
+        font-size: small;
+        position: relative;
+        z-index: 2;
+    }
+</style>
+<div style="display: flex;" class="flex-menus">
+    <fast-menu>
+        <fast-menu-item>Menu item 1</fast-menu-item>
+        <fast-menu-item>Menu item 2</fast-menu-item>
+        <fast-menu-item disabled="true">Menu item 3</fast-menu-item>
+        <fast-menu-item>
+            Menu item 4
+            <div slot="end">
+                Shortcut text
+            </div>
+        </fast-menu-item>
+        <fast-menu-item>
+            Menu item 5
+            <fast-menu>
+                <fast-menu-item>Nested Menu item 1.1</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.2</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.3</fast-menu-item>
+            </fast-menu>
+        </fast-menu-item>
+        <fast-menu-item>
+            Menu item 6
+            <div slot="end">
+                Shortcut text
+            </div>
+            <fast-menu>
+                <fast-menu-item>Nested Menu item 1.1</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.2</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.3</fast-menu-item>
+            </fast-menu>
+        </fast-menu-item>
+    </fast-menu>
+    <fast-menu style="margin: 0 0 0 10px;">
+        <fast-menu-item>Menu item 1</fast-menu-item>
+        <fast-menu-item>Menu item 2</fast-menu-item>
+        <fast-menu-item disabled="true">Menu item 3</fast-menu-item>
+        <fast-menu-item>
+            Menu item 4
+            <div slot="end">
+                Shortcut text
+            </div>
+        </fast-menu-item>
+        <fast-menu-item>
+            Menu item 5
+            <fast-menu>
+                <fast-menu-item>Nested Menu item 1.1</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.2</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.3</fast-menu-item>
+            </fast-menu>
+        </fast-menu-item>
+        <fast-menu-item>
+            Menu item 6
+            <div slot="end">
+                Shortcut text
+            </div>
+            <fast-menu>
+                <fast-menu-item>Nested Menu item 1.1</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.2</fast-menu-item>
+                <fast-menu-item>Nested Menu item 1.3</fast-menu-item>
+            </fast-menu>
+        </fast-menu-item>
+    </fast-menu>
+    <div>Test div</div>
+</div>