fix(radio-group): onChange event not triggering on keyboard navigation (

#3592) * fix(radio): onchange trigger * test: added test for change events on arrow key events --------- Co-authored-by: Rajdeep Chandra <[email protected]>
adobe · Aug 25, 2023 · 8501239 · 8501239
1 parent 7fc0c2e
commit 8501239
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/packages/radio/src/RadioGroup.ts b/packages/radio/src/RadioGroup.ts
@@ -52,7 +52,7 @@ export class RadioGroup extends FocusVisiblePolyfillMixin(FieldGroup) {
             });
         },
         elementEnterAction: (el: Radio) => {
-            this.selected = el.value;
+            this._setSelected(el.value);
         },
         elements: () => this.buttons,
         isFocusableElement: (el: Radio) => !el.disabled,

diff --git a/packages/radio/test/radio-group.test.ts b/packages/radio/test/radio-group.test.ts
@@ -666,4 +666,33 @@ describe('Radio Group - late children', () => {
         expect(group.buttons.length).to.equal(4);
         expect(group.selected).to.equal('first');
     });
+    it('emits change events on arrow key events', async () => {
+        const changeSpy = spy();
+        const onChange = (event: Event & { target: RadioGroup }): void => {
+            changeSpy(event.target.selected);
+        };
+        const el = await fixture<RadioGroup>(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 squirtle = el.querySelector('[value="squirtle"]') as Radio;
+
+        bulbasaur.focus();
+        await elementUpdated(el);
+        expect(changeSpy.callCount).to.equal(0);
+
+        el.dispatchEvent(arrowRightEvent());
+        await elementUpdated(el);
+        expect(changeSpy.callCount).to.equal(1);
+        expect(document.activeElement === squirtle).to.be.true;
+
+        el.dispatchEvent(arrowLeftEvent());
+        await elementUpdated(el);
+        expect(changeSpy.callCount).to.equal(2);
+        expect(document.activeElement === bulbasaur).to.be.true;
+    });
 });