diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 484bfd108..544945271 100644 --- 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 Enter 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 index 2d82e853f..dcd6972fb 100644 --- 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() {