fix(menu): prevent infinite loop when focus()

adobe · Nov 24, 2020 · 98cc45b · 98cc45b
1 parent e930e43
commit 98cc45b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts
@@ -63,7 +63,10 @@ export class Menu extends SpectrumElement {
     }
 
     public focus(): void {
-        if (!this.menuItems.length) {
+        if (
+            !this.menuItems.length ||
+            this.menuItems.every((item) => item.disabled)
+        ) {
             return;
         }
         this.focusMenuItemByOffset(0);

diff --git a/packages/menu/test/menu.test.ts b/packages/menu/test/menu.test.ts
@@ -59,6 +59,24 @@ describe('Menu', () => {
             .false;
         expect(document.activeElement === anchor, 'anchor').to.be.true;
     });
+    it('renders w/ [disabled] menu items', async () => {
+        const el = await fixture<Menu>(
+            html`
+                <sp-menu tabindex="0">
+                    <sp-menu-item disabled>Disabled item</sp-menu-item>
+                </sp-menu>
+            `
+        );
+
+        await elementUpdated(el);
+        expect(document.activeElement === el, 'self not focused, 1').to.be
+            .false;
+
+        el.focus();
+        await elementUpdated(el);
+        expect(document.activeElement === el, 'self not focused, 2').to.be
+            .false;
+    });
     it('renders w/ menu items', async () => {
         const el = await fixture<Menu>(
             html`