fix: stop propagation of sp-radio "change" events at sp-radio-group b…

…oundary
adobe · Apr 7, 2022 · f618460 · f618460
1 parent 8350cf4
commit f618460
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/packages/radio/src/Radio.ts b/packages/radio/src/Radio.ts
@@ -88,6 +88,9 @@ export class Radio extends FocusVisiblePolyfillMixin(SpectrumElement) {
     }
 
     protected activate(): void {
+        if (this.checked) {
+            return;
+        }
         this.checked = true;
         this.dispatchEvent(
             new Event('change', {

diff --git a/packages/radio/src/RadioGroup.ts b/packages/radio/src/RadioGroup.ts
@@ -109,10 +109,7 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
             }
         }
 
-        this.addEventListener('change', (event: Event) => {
-            if (event.target === this) {
-                return;
-            }
+        this.shadowRoot.addEventListener('change', (event: Event) => {
             event.stopPropagation();
             const target = event.target as Radio;
             this._setSelected(target.value);

diff --git a/packages/radio/test/radio-group.test.ts b/packages/radio/test/radio-group.test.ts
@@ -30,6 +30,7 @@ import {
     sendKeys,
 } from '@web/test-runner-commands';
 import { sendMouse } from '../../../test/plugins/browser.js';
+import { spy } from 'sinon';
 
 describe('Radio Group - focus control', () => {
     it('does not accept focus when empty', async () => {
@@ -606,4 +607,26 @@ describe('Radio Group', () => {
         ) as RadioGroup;
         expect(radioGroup.selected).to.equal('5');
     });
+
+    it('prevents `change` events from radio buttons', async () => {
+        const changeSpy = spy();
+        const onChange = (event: Event & { target: RadioGroup }): void => {
+            changeSpy(event.target.selected);
+        };
+        const el = await fixture(html`
+            <sp-radio-group @change=${onChange}>
+                <sp-radio value="bulbasaur">Bulbasaur</sp-radio>
+                <sp-radio value="squirtle">Squirtle</sp-radio>
+                <sp-radio value="charmander">Charmander</sp-radio>
+            </sp-radio-group>
+        `);
+
+        const bulbasaur = el.querySelector('[value="bulbasaur"]') as Radio;
+        const charmander = el.querySelector('[value="charmander"]') as Radio;
+        bulbasaur.click();
+        bulbasaur.click();
+        charmander.click();
+
+        expect(changeSpy.calledWith(undefined)).to.be.false;
+    });
 });