Fix sl-change event being emitted during initial render of radiogroup (#2537)

Author: jpzwarte

.changeset/violet-rice-attend.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/radio-group': patch
+---
+
+Fix `sl-change` event being emitted during initial render

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

@@ -10,16 +10,6 @@ import { RadioGroup } from './radio-group.js';
 describe('sl-radio-group', () => {
   let el: RadioGroup;
 
-  describe('empty', () => {
-    beforeEach(async () => {
-      el = await fixture(html`<sl-radio-group></sl-radio-group>`);
-    });
-
-    it('should not break', () => {
-      expect(el).shadowDom.to.equalSnapshot();
-    });
-  });
-
   describe('defaults', () => {
     beforeEach(async () => {
       el = await fixture(html`
@@ -31,10 +21,6 @@ describe('sl-radio-group', () => {
       `);
     });
 
-    it('should render correctly', () => {
-      expect(el).shadowDom.to.equalSnapshot();
-    });
-
     it('should have a role of radiogroup', () => {
       expect(el.internals.role).to.equal('radiogroup');
     });
@@ -402,6 +388,47 @@ describe('sl-radio-group', () => {
     });
   });
 
+  describe('sl-change event', () => {
+    it('should not be emitted during initial render with a value', async () => {
+      const onChange = spy();
+
+      document.body.addEventListener('sl-change', onChange);
+
+      el = await fixture(html`
+        <sl-radio-group value="2">
+          <sl-radio value="1">Option 1</sl-radio>
+          <sl-radio value="2">Option 2</sl-radio>
+          <sl-radio value="3">Option 3</sl-radio>
+        </sl-radio-group>
+      `);
+
+      expect(onChange).to.not.have.been.called;
+
+      document.body.removeEventListener('sl-change', onChange);
+    });
+
+    it('should be emitted after initial render when a radio is checked', async () => {
+      const onChange = spy();
+
+      document.body.addEventListener('sl-change', onChange);
+
+      el = await fixture(html`
+        <sl-radio-group value="2">
+          <sl-radio value="1">Option 1</sl-radio>
+          <sl-radio value="2">Option 2</sl-radio>
+          <sl-radio value="3">Option 3</sl-radio>
+        </sl-radio-group>
+      `);
+
+      el.querySelector<HTMLElement>('sl-radio[value="1"]')?.click();
+      await new Promise(resolve => setTimeout(resolve));
+
+      expect(onChange).to.have.been.calledOnce;
+
+      document.body.removeEventListener('sl-change', onChange);
+    });
+  });
+
   describe('form reset', () => {
     let form: HTMLFormElement;
 

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

@@ -54,18 +54,6 @@ export class RadioGroup<T = any> extends FormControlMixin(LitElement) {
   /** The initial state when the form was associated with the radio group. Used to reset the group. */
   #initialState?: T;
 
-  /**
-   * Stores the initial value of the radio group when it is first rendered.
-   * Used to determine if the value has changed since initialization and to manage event emission, avoiding unnecessary events on the first render.
-   */
-  #initialValue?: T;
-
-  /**
-   * Indicates whether the component is rendering for the first time.
-   * Used to track the initial render and preventing unnecessary event emission.
-   */
-  #isInitialRender = true;
-
   /** When an option is checked, update the state. */
   #observer = new MutationObserver(mutations => {
     const { target } = mutations.find(m => m.attributeName === 'checked' && m.oldValue === null) || {};
@@ -189,11 +177,6 @@ export class RadioGroup<T = any> extends FormControlMixin(LitElement) {
     }
 
     if (changes.has('value')) {
-      if (this.#isInitialRender) {
-        this.#initialValue = this.value;
-        this.#isInitialRender = false;
-      }
-
       this.#observer.disconnect();
       this.radios?.forEach(radio => (radio.checked = radio.value === this.value));
       this.#observer.observe(this, OBSERVER_OPTIONS);
@@ -223,10 +206,12 @@ export class RadioGroup<T = any> extends FormControlMixin(LitElement) {
     this.updateState({ touched: true });
   }
 
-  #onSlotchange(): void {
+  async #onSlotchange(): Promise<void> {
     this.#rovingTabindexController.clearElementCache();
 
-    this.radios?.forEach(radio => {
+    this.#observer.disconnect();
+
+    for (const radio of this.radios ?? []) {
       radio.checked = radio.value === this.value;
 
       if (typeof this.disabled === 'boolean') {
@@ -236,22 +221,24 @@ export class RadioGroup<T = any> extends FormControlMixin(LitElement) {
       if (this.size) {
         radio.size = this.size;
       }
-    });
+
+      // Wait for the `<sl-radio>` to stabilize, otherwise we'll trigger the observer
+      await radio.updateComplete;
+    }
+
+    this.#observer.observe(this, OBSERVER_OPTIONS);
   }
 
   #setSelectedOption(option?: Radio<T>, emitEvent = true): void {
     this.radios?.forEach(radio => (radio.checked = radio.value === option?.value));
     this.value = option?.value;
 
     if (emitEvent) {
-      if (!this.#initialValue) {
-        this.changeEvent.emit(this.value);
-      }
+      this.changeEvent.emit(this.value);
       this.updateState({ dirty: true });
     }
 
     this.#updateValueAndValidity();
-    this.#initialValue = undefined;
   }
 
   #updateValueAndValidity(): void {