fix radio group focus bug

shoelace-style · Aug 10, 2021 · 5aab7c3 · 5aab7c3
1 parent 72eff37
commit 5aab7c3
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 7 deletions.
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -40,6 +40,7 @@ This change applies to all design tokens that implement a color. Refer to the [c
 - Added CodePen link to code examples
 - Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438)
 - Fixed a bug in `sl-menu` where pressing <kbd>Enter</kbd> after using type to select would result in the wrong value
+- Fixed a bug in `sl-radio-group` where clicking a radio button would cause the wrong control to be focused
 - Refactored thumb position logic in `sl-switch` [#490](https://github.com/shoelace-style/shoelace/pull/490)
 - Reworked the dark theme to use an inverted token approach instead of light DOM selectors
 

diff --git a/src/components/radio-group/radio-group.ts b/src/components/radio-group/radio-group.ts
@@ -27,14 +27,16 @@ export default class SlRadioGroup extends LitElement {
   @property({ type: Boolean, attribute: 'no-fieldset' }) noFieldset = false;
 
   handleFocusIn() {
-    // When focusing into the fieldset, make sure it lands on the checked radio
-    const checkedRadio = [...this.defaultSlot.assignedElements({ flatten: true })].find(
-      el => el.tagName.toLowerCase() === 'sl-radio' && (el as SlRadio).checked
-    ) as SlRadio;
+    // When tabbing into the fieldset, make sure it lands on the checked radio
+    requestAnimationFrame(() => {
+      const checkedRadio = [...this.defaultSlot.assignedElements({ flatten: true })].find(
+        el => el.tagName.toLowerCase() === 'sl-radio' && (el as SlRadio).checked
+      ) as SlRadio;
 
-    if (checkedRadio) {
-      checkedRadio.focus();
-    }
+      if (checkedRadio) {
+        checkedRadio.focus();
+      }
+    });
   }
 
   render() {