test(action-group): guantee one change event when children toggle

adobe · Oct 3, 2023 · bc7b8a0 · bc7b8a0
1 parent 323ac0f
commit bc7b8a0
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/packages/action-group/src/ActionGroup.ts b/packages/action-group/src/ActionGroup.ts
@@ -183,6 +183,11 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
         });
     }
 
+    private handleActionButtonChange(event: Event): void {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
     private handleClick(event: Event): void {
         const target = event.target as ActionButton;
         if (typeof target.value === 'undefined') {
@@ -339,6 +344,17 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
         if (changes.has('selects')) {
             this.manageSelects();
             this.manageChildren();
+            if (!!this.selects) {
+                this.shadowRoot.addEventListener(
+                    'change',
+                    this.handleActionButtonChange
+                );
+            } else {
+                this.shadowRoot.removeEventListener(
+                    'change',
+                    this.handleActionButtonChange
+                );
+            }
         }
         if (
             changes.has('quiet') ||
@@ -363,7 +379,6 @@ export class ActionGroup extends SizedMixin(SpectrumElement, {
 
     private manageChildren(changes?: PropertyValues): void {
         this.buttons.forEach((button) => {
-            button.toggles = false;
             if (this.quiet || changes?.get('quiet')) {
                 button.quiet = this.quiet;
             }

diff --git a/packages/action-group/test/action-group.test.ts b/packages/action-group/test/action-group.test.ts
@@ -535,6 +535,46 @@ describe('ActionGroup', () => {
             'Updates value of `selected`'
         );
     });
+    it('consumes descendant `change` events when `[selects]`', async () => {
+        const changeSpy = spy();
+        const el = await fixture<ActionGroup>(
+            html`
+                <sp-action-group
+                    @change=${() => changeSpy()}
+                    label="Selects Single Group"
+                    selects="single"
+                >
+                    <sp-action-button toggles value="first">
+                        First
+                    </sp-action-button>
+                    <sp-action-button toggles value="second" selected>
+                        Second
+                    </sp-action-button>
+                    <sp-action-button toggles value="third" class="third">
+                        Third
+                    </sp-action-button>
+                </sp-action-group>
+            `
+        );
+        const thirdElement = el.querySelector('.third') as ActionButton;
+
+        await elementUpdated(el);
+        expect(el.selected.length).to.equal(1);
+        expect(el.selected.includes('second'));
+        expect(changeSpy.callCount).to.equal(0);
+
+        thirdElement.click();
+
+        await elementUpdated(el);
+
+        expect(thirdElement.selected, 'third child selected').to.be.true;
+        expect(changeSpy.callCount).to.equal(1);
+
+        await waitUntil(
+            () => el.selected.length === 1 && el.selected.includes('third'),
+            'Updates value of `selected`'
+        );
+    });
     it('does not respond to clicks on itself', async () => {
         const el = await fixture<ActionGroup>(
             html`