fix(menu): disabled menu-item should not open submenu

adobe · May 27, 2022 · 33848bc · 33848bc
1 parent 8f5ea35
commit 33848bc
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 1 deletion.
diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts
@@ -371,7 +371,7 @@ export class MenuItem extends LikeAnchor(Focusable) {
     public async openOverlay({
         immediate,
     }: { immediate?: boolean } = {}): Promise<void> {
-        if (!this.hasSubmenu || this.open) {
+        if (!this.hasSubmenu || this.open || this.disabled) {
             return;
         }
         this.open = true;

diff --git a/packages/menu/src/menu-item.css b/packages/menu/src/menu-item.css
@@ -19,6 +19,10 @@ governing permissions and limitations under the License.
     display: none;
 }
 
+:host([disabled]) {
+    pointer-events: none;
+}
+
 #button {
     position: absolute;
     inset: 0;

diff --git a/packages/menu/test/submenu.test.ts b/packages/menu/test/submenu.test.ts
@@ -399,6 +399,51 @@ describe('Submenu', () => {
 
         expect(rootItem.open).to.be.false;
     });
+    it('not opens if disabled', async () => {
+        const el = await styledFixture<Menu>(
+            html`
+                <sp-menu>
+                    <sp-menu-item disabled class="root">
+                        Has submenu
+                        <sp-menu slot="submenu">
+                            <sp-menu-item class="submenu-item-1">
+                                One
+                            </sp-menu-item>
+                            <sp-menu-item class="submenu-item-2">
+                                Two
+                            </sp-menu-item>
+                            <sp-menu-item class="submenu-item-3">
+                                Three
+                            </sp-menu-item>
+                        </sp-menu>
+                    </sp-menu-item>
+                </sp-menu>
+            `
+        );
+
+        await elementUpdated(el);
+        const rootItem = el.querySelector('.root') as MenuItem;
+        const rootItemBoundingRect = rootItem.getBoundingClientRect();
+        expect(rootItem.open).to.be.false;
+
+        sendMouse({
+            steps: [
+                {
+                    type: 'move',
+                    position: [
+                        rootItemBoundingRect.left +
+                            rootItemBoundingRect.width / 2,
+                        rootItemBoundingRect.top +
+                            rootItemBoundingRect.height / 2,
+                    ],
+                },
+            ],
+        });
+        // wait 200ms for open
+        await new Promise((r) => setTimeout(r, 200));
+
+        expect(rootItem.open).to.be.false;
+    });
     it('stays open when mousing off menu item and back again', async () => {
         const el = await styledFixture<Menu>(
             html`