From 1462e300d69f0cd7ee5476dfe3a7ea892ac8f4ad Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 22 Mar 2025 13:02:28 -0700
Subject: [PATCH] fix(radio-button): forward `focus`, `blur` events (#2135)

As identified in #2131, `focus` and `blur` events should be
forwarded to the underlying `RadioButton` element.
---
 COMPONENT_INDEX.md                        |  2 ++
 docs/src/COMPONENT_API.json               | 10 ++++++++++
 src/RadioButton/RadioButton.svelte        |  2 ++
 tests/RadioButton/RadioButton.test.svelte |  6 ++++++
 tests/RadioButton/RadioButton.test.ts     |  3 +--
 types/RadioButton/RadioButton.svelte.d.ts |  6 +++++-
 6 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 9a14e927..be19a1ca 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2966,6 +2966,8 @@ None.
 
 | Event name | Type      | Detail |
 | :--------- | :-------- | :----- |
+| focus      | forwarded | --     |
+| blur       | forwarded | --     |
 | change     | forwarded | --     |
 
 ## `RadioButtonGroup`
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index d1115787..e4826601 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11389,6 +11389,16 @@
         }
       ],
       "events": [
+        {
+          "type": "forwarded",
+          "name": "focus",
+          "element": "input"
+        },
+        {
+          "type": "forwarded",
+          "name": "blur",
+          "element": "input"
+        },
         {
           "type": "forwarded",
           "name": "change",
diff --git a/src/RadioButton/RadioButton.svelte b/src/RadioButton/RadioButton.svelte
index 6fecf17e..3ce9aa22 100644
--- a/src/RadioButton/RadioButton.svelte
+++ b/src/RadioButton/RadioButton.svelte
@@ -71,6 +71,8 @@
     required={$groupRequired ?? required}
     {value}
     class:bx--radio-button={true}
+    on:focus
+    on:blur
     on:change
     on:change={() => {
       if (update) {
diff --git a/tests/RadioButton/RadioButton.test.svelte b/tests/RadioButton/RadioButton.test.svelte
index 166c4b42..59282887 100644
--- a/tests/RadioButton/RadioButton.test.svelte
+++ b/tests/RadioButton/RadioButton.test.svelte
@@ -26,6 +26,12 @@
   {id}
   {name}
   {ref}
+  on:focus={() => {
+    console.log("focus");
+  }}
+  on:blur={() => {
+    console.log("blur");
+  }}
   on:change={() => {
     console.log("change");
   }}
diff --git a/tests/RadioButton/RadioButton.test.ts b/tests/RadioButton/RadioButton.test.ts
index 6103c8d8..3b321c57 100644
--- a/tests/RadioButton/RadioButton.test.ts
+++ b/tests/RadioButton/RadioButton.test.ts
@@ -91,8 +91,7 @@ describe("RadioButton", () => {
     expect(consoleLog).toHaveBeenCalledWith("change");
   });
 
-  // TODO(bug): forward focus/blur events.
-  it.skip("should handle focus and blur events", async () => {
+  it("should handle focus and blur events", async () => {
     const consoleLog = vi.spyOn(console, "log");
     render(RadioButton);
 
diff --git a/types/RadioButton/RadioButton.svelte.d.ts b/types/RadioButton/RadioButton.svelte.d.ts
index bc2e94d3..6933bef7 100644
--- a/types/RadioButton/RadioButton.svelte.d.ts
+++ b/types/RadioButton/RadioButton.svelte.d.ts
@@ -71,6 +71,10 @@ export type RadioButtonProps = Omit<$RestProps, keyof $Props> & $Props;
 
 export default class RadioButton extends SvelteComponentTyped<
   RadioButtonProps,
-  { change: WindowEventMap["change"] },
+  {
+    focus: WindowEventMap["focus"];
+    blur: WindowEventMap["blur"];
+    change: WindowEventMap["change"];
+  },
   { labelText: {} }
 > {}