fix(menu): allow using non-menu-item element as submenu

adobe · Sep 4, 2024 · 90b7d35 · 90b7d35
1 parent 815d6f7
commit 90b7d35
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts
@@ -375,7 +375,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
         }) as MenuItem;
         if (event.defaultPrevented) {
             const index = this.childItems.indexOf(target);
-            if (target?.menuData.focusRoot === this && index > -1) {
+            if (target?.menuData?.focusRoot === this && index > -1) {
                 this.focusedItemIndex = index;
             }
             return;
@@ -391,7 +391,7 @@ export class Menu extends SizedMixin(SpectrumElement, { noDefaultSize: true }) {
             );
             return;
         } else if (
-            target?.menuData.selectionRoot === this &&
+            target?.menuData?.selectionRoot === this &&
             this.childItems.length
         ) {
             event.preventDefault();

diff --git a/packages/menu/stories/submenu.stories.ts b/packages/menu/stories/submenu.stories.ts
@@ -173,24 +173,17 @@ export const submenu = (): TemplateResult => {
                 <sp-menu-item>Bronx</sp-menu-item>
                 <sp-menu-item id="submenu-item-1">
                     Brooklyn
-                    <sp-menu
+
+                    <li
+                        class="spectrum-Menu-item"
+                        tabindex="0"
+                        role="menuitem"
                         slot="submenu"
-                        @change=${handleFirstDescendantChange}
                     >
-                        <sp-menu-item id="submenu-item-2">
-                            Ft. Greene
-                            <sp-menu
-                                slot="submenu"
-                                @change=${handleSecondDescendantChange}
-                            >
-                                <sp-menu-item>S. Oxford St</sp-menu-item>
-                                <sp-menu-item>S. Portland Ave</sp-menu-item>
-                                <sp-menu-item>S. Elliot Pl</sp-menu-item>
-                            </sp-menu>
-                        </sp-menu-item>
-                        <sp-menu-item disabled>Park Slope</sp-menu-item>
-                        <sp-menu-item>Williamsburg</sp-menu-item>
-                    </sp-menu>
+                        <span class="spectrum-Menu-itemLabel">
+                            <span>Edit version info</span>
+                        </span>
+                    </li>
                 </sp-menu-item>
                 <sp-menu-item>
                     Manhattan

diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
@@ -1068,4 +1068,60 @@ describe('Submenu', () => {
         expect(rootItem1.open, 'finally closed 1').to.be.false;
         expect(rootItem2.open, 'finally closed 2').to.be.false;
     });
+    // it.only('supports using non-menu-item elements as the root of a submenu', async () => {
+    //     const el = await fixture<Menu>(html`
+    //         <sp-menu>
+    //             <sp-menu-item class="root">
+    //                 Has submenu
+    //                 <div tabindex="0" role="menuitem" slot="submenu">
+    //                     <sp-menu-item class="submenu-1">One</sp-menu-item>
+    //                     <sp-menu-item>Two</sp-menu-item>
+    //                     <sp-menu-item>Three</sp-menu-item>
+    //                 </div
+    //             ></div>
+    //             </sp-menu-item>
+    //         </sp-menu>
+    //     `);
+    //     await elementUpdated(el);
+    //     const rootItem = el.querySelector('.root') as MenuItem;
+    //     const rootItemBoundingRect = rootItem.getBoundingClientRect();
+
+    //     // Open the first submenu
+    //     await sendMouse({
+    //         steps: [
+    //             {
+    //                 type: 'move',
+    //                 position: [
+    //                     rootItemBoundingRect.left +
+    //                         rootItemBoundingRect.width / 2,
+    //                     rootItemBoundingRect.top +
+    //                         rootItemBoundingRect.height / 2,
+    //                 ],
+    //             },
+    //         ],
+    //     });
+
+    //     expect(rootItem.open).to.be.true;
+
+    //     const firstSubMenuItemRect = el
+    //         .querySelector('.submenu-1')
+    //         .getBoundingClientRect();
+
+    //     // click to select
+    //     await sendMouse({
+    //         steps: [
+    //             {
+    //                 type: 'click',
+    //                 position: [
+    //                     firstSubMenuItemRect.left +
+    //                         firstSubMenuItemRect.width / 2,
+    //                     firstSubMenuItemRect.top +
+    //                         firstSubMenuItemRect.height / 2,
+    //                 ],
+    //             },
+    //         ],
+    //     });
+
+    //     aTimeout(2000);
+    // });
 });