From 65d31a68c1c5904ebd258f00d531b6d46f31461a Mon Sep 17 00:00:00 2001
From: christophe-g <christophe.geiser@gmail.com>
Date: Mon, 3 Jul 2023 11:17:09 +0200
Subject: [PATCH] fix(dialog): fire a change event when using arrow keys.

---
 radio/lib/single-selection-controller.ts |  4 ++++
 radio/radio_test.ts                      | 14 ++++++++++++++
 2 files changed, 18 insertions(+)

diff --git a/radio/lib/single-selection-controller.ts b/radio/lib/single-selection-controller.ts
index b72566e787..0a697719f9 100644
--- a/radio/lib/single-selection-controller.ts
+++ b/radio/lib/single-selection-controller.ts
@@ -219,6 +219,10 @@ export class SingleSelectionController implements ReactiveController {
       nextSibling.checked = true;
       nextSibling.removeAttribute('tabindex');
       nextSibling.focus();
+      // Fire a change event since the change is triggered by a user action.
+      // This matches native <input type="radio"> behavior.
+      nextSibling.dispatchEvent(new Event('change', {bubbles: true}));
+
       break;
     }
   };
diff --git a/radio/radio_test.ts b/radio/radio_test.ts
index c895991f4c..4efe82b136 100644
--- a/radio/radio_test.ts
+++ b/radio/radio_test.ts
@@ -138,6 +138,20 @@ describe('<md-radio>', () => {
       expect(a2.element.checked).withContext('prev radio checked').toBeFalse();
     });
 
+    it('Using arrow right should fire a change event', async () => {
+      const {harnesses, root} = await setupTest(radioGroupPreSelected);
+      const changeHandler = jasmine.createSpy('changeHandler');
+      root.addEventListener('change', changeHandler);
+      const [, a2] = harnesses;
+      expect(a2.element.checked)
+          .withContext('default checked radio')
+          .toBeTrue();
+      
+      await simulateKeyDown(a2.element, 'ArrowRight');
+
+      expect(changeHandler).toHaveBeenCalledTimes(1);
+    });
+
     it('Using arrow right on the last radio should select the first radio in that group',
        async () => {
          const {harnesses} = await setupTest(radioGroupPreSelected);