fix checked handling

docs/resources/changelog.md

@@ -15,6 +15,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Added support for `step="any"` for `<sl-input type="number">` [#839](https://github.com/shoelace-style/shoelace/issues/839)
 - Changed the type of component styles from `CSSResult` to `CSSResultGroup` [#828](https://github.com/shoelace-style/shoelace/issues/828)
 - Fixed a bug in `<sl-color-picker>` where using <kbd>Left<kbd> and <kbd>Right</kbd> would select the wrong color
+- Fixed a bug in `<sl-radio-group>` where setting the `checked` property programmatically would allow multiple radios or radio buttons to be checked
 - Fixed a bug in `<sl-tab-group>` where the divider was on the wrong side when using `placement="end"`
 - Fixed a bug in `<sl-tab-group>` that caused nested tab groups to scroll when using `placement="start|end"` [#815](https://github.com/shoelace-style/shoelace/issues/815)
 - Fixed a bug in `<sl-tooltip>` that caused the target to be lost after a slot change [#831](https://github.com/shoelace-style/shoelace/pull/831)

src/components/radio-button/radio-button.test.ts

@@ -89,8 +89,9 @@ describe('<sl-radio-button>', () => {
 
       form.addEventListener('submit', submitHandler);
       radio.click();
-      button.click();
+      await radio.updateComplete;
 
+      button.click();
       await waitUntil(() => submitHandler.calledOnce);
 
       expect(formData!.get('a')).to.equal('2');

src/components/radio-group/radio-group.ts

@@ -3,6 +3,7 @@ import { customElement, property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import '../../components/button-group/button-group';
 import styles from './radio-group.styles';
+import type SlRadioButton from '../../components/radio-button/radio-button';
 import type SlRadio from '../../components/radio/radio';
 import type { CSSResultGroup } from 'lit';
 
@@ -50,19 +51,6 @@ export default class SlRadioGroup extends LitElement {
     ) as SlRadio[];
   }
 
-  handleRadioClick(event: MouseEvent) {
-    const target = event.target as HTMLElement;
-    const checkedRadio = target.closest(RADIO_CHILDREN.map(selector => `${selector}:not([disabled])`).join(','));
-
-    if (checkedRadio) {
-      const radios = this.getAllRadios();
-      radios.forEach(radio => {
-        radio.checked = radio === checkedRadio;
-        radio.input.tabIndex = radio === checkedRadio ? 0 : -1;
-      });
-    }
-  }
-
   handleKeyDown(event: KeyboardEvent) {
     if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
       const radios = this.getAllRadios().filter(radio => !radio.disabled);
@@ -89,6 +77,19 @@ export default class SlRadioGroup extends LitElement {
     }
   }
 
+  handleRadioChange(event: CustomEvent) {
+    const target = event.target as SlRadio | SlRadioButton;
+
+    if (RADIO_CHILDREN.includes(target.tagName.toLowerCase())) {
+      if (target.checked) {
+        this.getAllRadios().forEach(radio => {
+          radio.checked = radio === target;
+          radio.input.tabIndex = radio === target ? 0 : -1;
+        });
+      }
+    }
+  }
+
   handleSlotChange() {
     const radios = this.getAllRadios();
     const checkedRadio = radios.find(radio => radio.checked);
@@ -108,9 +109,7 @@ export default class SlRadioGroup extends LitElement {
   }
 
   render() {
-    const defaultSlot = html`
-      <slot @click=${this.handleRadioClick} @keydown=${this.handleKeyDown} @slotchange=${this.handleSlotChange}></slot>
-    `;
+    const defaultSlot = html` <slot @keydown=${this.handleKeyDown} @slotchange=${this.handleSlotChange}></slot> `;
 
     return html`
       <fieldset
@@ -120,6 +119,7 @@ export default class SlRadioGroup extends LitElement {
           'radio-group--has-fieldset': this.fieldset,
           'radio-group--required': this.required
         })}
+        @sl-change=${this.handleRadioChange}
       >
         <legend part="label" class="radio-group__label">
           <slot name="label">${this.label}</slot>

src/components/radio/radio.test.ts

@@ -90,8 +90,9 @@ describe('<sl-radio>', () => {
 
       form.addEventListener('submit', submitHandler);
       radio.click();
-      button.click();
+      await radio.updateComplete;
 
+      button.click();
       await waitUntil(() => submitHandler.calledOnce);
 
       expect(formData!.get('a')).to.equal('2');