fix(action-group): manage Action Button selection through multiple slots

adobe · Mar 15, 2024 · 4d02b46 · 4d02b46
1 parent 2cd5823
commit 4d02b46
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 7 deletions.
diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts
@@ -170,13 +170,12 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
     }
 
     private deselectSelectedButtons(): void {
-        const selected = [
-            ...this.querySelectorAll('[selected]'),
-        ] as ActionButton[];
-        selected.forEach((el) => {
-            el.selected = false;
-            el.tabIndex = -1;
-            el.setAttribute(
+        this.buttons.forEach((button) => {
+            if (!button.selected) return;
+
+            button.selected = false;
+            button.tabIndex = -1;
+            button.setAttribute(
                 this.selects ? 'aria-checked' : /* c8 ignore */ 'aria-pressed',
                 'false'
             );

diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
@@ -423,6 +423,45 @@ describe('ActionGroup', () => {
 
         expect(el.selected, '"Third" selected').to.deep.equal(['Third']);
     });
+    it('manages [selects="single"] selection through multiple slots', async () => {
+        const test = await fixture<HTMLDivElement>(
+            html`
+                <div>
+                    <sp-action-button>First</sp-action-button>
+                    <sp-action-button>Second</sp-action-button>
+                    <sp-action-button selected>Third</sp-action-button>
+                </div>
+            `
+        );
+
+        const firstItem = test.querySelector(
+            'sp-action-button'
+        ) as ActionButton;
+        const thirdItem = test.querySelector(
+            'sp-action-button[selected]'
+        ) as ActionButton;
+
+        const shadowRoot = test.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <sp-action-group label="Selects Single Group" selects="single">
+                <slot></slot>
+            </sp-action-group>
+        `;
+
+        const el = shadowRoot.querySelector('sp-action-group') as ActionGroup;
+        await elementUpdated(el);
+
+        expect(el.selected, '"Third" selected').to.deep.equal(['Third']);
+        expect(firstItem.selected).to.be.false;
+        expect(thirdItem.selected).to.be.true;
+
+        firstItem.click();
+        await elementUpdated(el);
+
+        expect(el.selected, '"First" selected').to.deep.equal(['First']);
+        expect(firstItem.selected).to.be.true;
+        expect(thirdItem.selected).to.be.false;
+    });
     it('surfaces [selects="multiple"] selection', async () => {
         const el = await fixture<ActionGroup>(
             html`