fix(radio): dispatches input event on select

PiperOrigin-RevId: 565522665
material-components · Sep 15, 2023 · e444de3 · e444de3
1 parent 116b448
commit e444de3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 0 deletions.
diff --git a/radio/internal/radio.ts b/radio/internal/radio.ts
@@ -155,6 +155,8 @@ export class Radio extends LitElement {
     // Per spec, clicking on a radio input always selects it.
     this.checked = true;
     this.dispatchEvent(new Event('change', {bubbles: true}));
+    this.dispatchEvent(
+        new InputEvent('input', {bubbles: true, composed: true}));
   }
 
   private async handleKeydown(event: KeyboardEvent) {

diff --git a/radio/radio_test.ts b/radio/radio_test.ts
@@ -139,6 +139,21 @@ describe('<md-radio>', () => {
       expect(changeHandler).toHaveBeenCalledTimes(1);
       expect(changeHandler).toHaveBeenCalledWith(jasmine.any(Event));
     });
+
+    it('Should trigger input event when a radio is selected', async () => {
+      const {harnesses, root} = await setupTest(radioGroupPreSelected);
+      const inputHandler = jasmine.createSpy('inputHandler');
+      root.addEventListener('input', inputHandler);
+
+      const a3 = harnesses[2];
+      await a3.clickWithMouse();
+
+      expect(a3.element.checked)
+          .withContext('clicked radio checked')
+          .toBeTrue();
+      expect(inputHandler).toHaveBeenCalledTimes(1);
+      expect(inputHandler).toHaveBeenCalledWith(jasmine.any(InputEvent));
+    });
   });
 
   describe('navigation', () => {