fix: remove deprecated didChange events where possible

BREAKING CHANGE: remove deprecated `didChange` events from `sbb-checkbox`, `sbb-checkbox-panel`, `sbb-toggle-check`, `sbb-select`, `sbb-toggle` and `sbb-datepicker`. Use `change` event as alternative.
sbb-design-systems · Nov 27, 2024 · def6fe4 · def6fe4
1 parent ad6b19f
commit def6fe4
Show file tree

Hide file tree

Showing 17 changed files with 64 additions and 81 deletions.
diff --git a/src/elements/autocomplete/autocomplete-base-element.ts b/src/elements/autocomplete/autocomplete-base-element.ts
@@ -179,7 +179,10 @@ export abstract class SbbAutocompleteBaseElement extends SbbNegativeMixin(
 
     if (this.triggerElement) {
       // Set the option value
-      this.triggerElement.value = target.value as string;
+      // In order to support React onChange event, we have to get the setter and call it.
+      // https://github.com/facebook/react/issues/11600#issuecomment-345813130
+      const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;
+      setValue.call(this.triggerElement, target.value);
 
       // Manually trigger the change events
       this.triggerElement.dispatchEvent(new Event('change', { bubbles: true }));

diff --git a/src/elements/checkbox/checkbox-panel/checkbox-panel.ts b/src/elements/checkbox/checkbox-panel/checkbox-panel.ts
@@ -38,7 +38,6 @@ export type SbbCheckboxPanelStateChange = Extract<
  * @slot subtext - Slot used to render a subtext under the label (only visible within a selection panel).
  * @slot suffix - Slot used to render additional content after the label (only visible within a selection panel).
  * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
  */
@@ -52,7 +51,6 @@ class SbbCheckboxPanelElement extends SbbPanelMixin(
 
   // FIXME using ...super.events requires: https://github.com/sbb-design-systems/lyne-components/issues/2600
   public static readonly events = {
-    didChange: 'didChange',
     stateChange: 'stateChange',
     panelConnected: 'panelConnected',
   } as const;

diff --git a/src/elements/checkbox/checkbox-panel/readme.md b/src/elements/checkbox/checkbox-panel/readme.md
@@ -92,11 +92,10 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `change`    | `Event`             | Event fired on change.                                                           |                |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `input`     | `InputEvent`        | Event fired on input.                                                            |                |
+| Name     | Type         | Description            | Inherited From |
+| -------- | ------------ | ---------------------- | -------------- |
+| `change` | `Event`      | Event fired on change. |                |
+| `input`  | `InputEvent` | Event fired on input.  |                |
 
 ## Slots
 

diff --git a/src/elements/checkbox/checkbox/checkbox.ts b/src/elements/checkbox/checkbox/checkbox.ts
@@ -19,7 +19,6 @@ import '../../visual-checkbox.js';
  *
  * @slot - Use the unnamed slot to add content to the `sbb-checkbox`.
  * @slot icon - Slot used to render the checkbox icon (disabled inside a selection panel).
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
  */
@@ -29,10 +28,6 @@ export
 class SbbCheckboxElement extends SbbCheckboxCommonElementMixin(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = [checkboxCommonStyle, checkboxStyle];
 
-  public static readonly events = {
-    didChange: 'didChange',
-  } as const;
-
   /** Size variant. */
   @property({ reflect: true })
   @getOverride((i, v) => i.group?.size ?? v)

diff --git a/src/elements/checkbox/checkbox/readme.md b/src/elements/checkbox/checkbox/readme.md
@@ -98,11 +98,10 @@ If you don't want the label to appear next to the checkbox, you can use `aria-la
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `change`    | `Event`             | Event fired on change.                                                           |                |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `input`     | `InputEvent`        | Event fired on input.                                                            |                |
+| Name     | Type         | Description            | Inherited From |
+| -------- | ------------ | ---------------------- | -------------- |
+| `change` | `Event`      | Event fired on change. |                |
+| `input`  | `InputEvent` | Event fired on input.  |                |
 
 ## Slots
 

diff --git a/src/elements/core/mixins/form-associated-checkbox-mixin.ts b/src/elements/core/mixins/form-associated-checkbox-mixin.ts
@@ -189,7 +189,6 @@ export const SbbFormAssociatedCheckboxMixin = <T extends Constructor<LitElement>
 
       this.dispatchEvent(new InputEvent('input', { composed: true, bubbles: true }));
       this.dispatchEvent(new Event('change', { bubbles: true }));
-      this.dispatchEvent(new CustomEvent('didChange', { bubbles: true }));
     };
   }
 

diff --git a/src/elements/datepicker/datepicker/datepicker.ts b/src/elements/datepicker/datepicker/datepicker.ts
@@ -56,7 +56,6 @@ export const datepickerControlRegisteredEventFactory = (): CustomEvent =>
 /**
  * Combined with a native input, it displays the input's value as a formatted date.
  *
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {CustomEvent<void>} change - Notifies that the connected input has changes.
  * @event {CustomEvent<SbbInputUpdateEvent>} inputUpdated - Notifies that the attributes of the input connected to the datepicker have changes.
  * @event {CustomEvent<void>} datePickerUpdated - Notifies that the attributes of the datepicker have changes.
@@ -67,7 +66,6 @@ export
 class SbbDatepickerElement<T = Date> extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didChange: 'didChange',
     change: 'change',
     inputUpdated: 'inputUpdated',
     datePickerUpdated: 'datePickerUpdated',
@@ -111,14 +109,6 @@ class SbbDatepickerElement<T = Date> extends LitElement {
   }
   private _valueAsDate?: T | null;
 
-  /**
-   * @deprecated only used for React. Will probably be removed once React 19 is available.
-   */
-  private _didChange: EventEmitter = new EventEmitter(this, SbbDatepickerElement.events.didChange, {
-    bubbles: true,
-    cancelable: true,
-  });
-
   /** Notifies that the connected input has changes. */
   private _change: EventEmitter = new EventEmitter(this, SbbDatepickerElement.events.change, {
     bubbles: true,
@@ -269,7 +259,6 @@ class SbbDatepickerElement<T = Date> extends LitElement {
     this._validateDate();
     this._setAriaLiveMessage();
     this._change.emit();
-    this._didChange.emit();
   }
 
   private _tryApplyFormatToInput(): boolean {

diff --git a/src/elements/datepicker/datepicker/readme.md b/src/elements/datepicker/datepicker/readme.md
@@ -93,6 +93,5 @@ Whenever the validation state changes (e.g., a valid value becomes invalid or vi
 | ------------------- | --------------------------------------- | ----------------------------------------------------------------------------------- | -------------- |
 | `change`            | `CustomEvent<void>`                     | Notifies that the connected input has changes.                                      |                |
 | `datePickerUpdated` | `CustomEvent<void>`                     | Notifies that the attributes of the datepicker have changes.                        |                |
-| `didChange`         | `CustomEvent<void>`                     | Deprecated. used for React. Will probably be removed once React 19 is available.    |                |
 | `inputUpdated`      | `CustomEvent<SbbInputUpdateEvent>`      | Notifies that the attributes of the input connected to the datepicker have changes. |                |
 | `validationChange`  | `CustomEvent<SbbValidationChangeEvent>` | Emits whenever the internal validation state changes.                               |                |
diff --git a/src/elements/form-field/form-field/form-field.ts b/src/elements/form-field/form-field/form-field.ts
@@ -287,10 +287,23 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement)
         signal: this._inputAbortController.signal,
       });
 
-      inputFocusElement = (this._input as SbbSelectElement).inputElement;
+      const selectInput = this._input as SbbSelectElement;
+      inputFocusElement = selectInput.inputElement;
+
+      // If inputElement is not yet ready, try a second time after updating.
+      if (!inputFocusElement) {
+        const controller = {
+          hostUpdated: () => {
+            selectInput.removeController(controller);
+            this._registerInputListener();
+          },
+        };
+
+        selectInput.addController(controller);
+      }
     }
 
-    inputFocusElement.addEventListener(
+    inputFocusElement?.addEventListener(
       'focusin',
       () => {
         this.toggleAttribute('data-input-focused', true);
@@ -304,7 +317,7 @@ class SbbFormFieldElement extends SbbNegativeMixin(SbbHydrationMixin(LitElement)
       },
     );
 
-    inputFocusElement.addEventListener(
+    inputFocusElement?.addEventListener(
       'focusout',
       () =>
         ['data-focus-origin', 'data-input-focused'].forEach((name) => this.removeAttribute(name)),

diff --git a/src/elements/select/readme.md b/src/elements/select/readme.md
@@ -163,15 +163,14 @@ Opened panel:
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From          |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | ----------------------- |
-| `change`    | `CustomEvent<void>` | Notifies that the component's value has changed.                                 |                         |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                         |
-| `didClose`  | `CustomEvent<void>` | Emits whenever the `sbb-select` is closed.                                       | SbbOpenCloseBaseElement |
-| `didOpen`   | `CustomEvent<void>` | Emits whenever the `sbb-select` is opened.                                       | SbbOpenCloseBaseElement |
-| `input`     | `CustomEvent<void>` | Notifies that an option value has been selected.                                 |                         |
-| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-select` begins the closing transition. Can be canceled.  | SbbOpenCloseBaseElement |
-| `willOpen`  | `CustomEvent<void>` | Emits whenever the `sbb-select` starts the opening transition. Can be canceled.  | SbbOpenCloseBaseElement |
+| Name        | Type                | Description                                                                     | Inherited From          |
+| ----------- | ------------------- | ------------------------------------------------------------------------------- | ----------------------- |
+| `change`    | `CustomEvent<void>` | Notifies that the component's value has changed.                                |                         |
+| `didClose`  | `CustomEvent<void>` | Emits whenever the `sbb-select` is closed.                                      | SbbOpenCloseBaseElement |
+| `didOpen`   | `CustomEvent<void>` | Emits whenever the `sbb-select` is opened.                                      | SbbOpenCloseBaseElement |
+| `input`     | `CustomEvent<void>` | Notifies that an option value has been selected.                                |                         |
+| `willClose` | `CustomEvent<void>` | Emits whenever the `sbb-select` begins the closing transition. Can be canceled. | SbbOpenCloseBaseElement |
+| `willOpen`  | `CustomEvent<void>` | Emits whenever the `sbb-select` starts the opening transition. Can be canceled. | SbbOpenCloseBaseElement |
 
 ## CSS Properties
 

diff --git a/src/elements/select/select.ts b/src/elements/select/select.ts
@@ -43,7 +43,6 @@ export interface SelectChange {
  * It displays a panel with selectable options.
  *
  * @slot - Use the unnamed slot to add options.
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {CustomEvent<void>} change - Notifies that the component's value has changed.
  * @event {CustomEvent<void>} input - Notifies that an option value has been selected.
  * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-select` starts the opening transition. Can be canceled.
@@ -77,7 +76,6 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin(
 
   // FIXME using ...super.events requires: https://github.com/sbb-design-systems/lyne-components/issues/2600
   public static override readonly events = {
-    didChange: 'didChange',
     change: 'change',
     input: 'input',
     stateChange: 'stateChange',
@@ -113,11 +111,6 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin(
   /** The value displayed by the component. */
   @state() private accessor _displayValue: string | null = null;
 
-  /**
-   * @deprecated only used for React. Will probably be removed once React 19 is available.
-   */
-  private _didChange: EventEmitter = new EventEmitter(this, SbbSelectElement.events.didChange);
-
   /** Notifies that the component's value has changed. */
   private _change: EventEmitter = new EventEmitter(this, SbbSelectElement.events.change);
 
@@ -519,7 +512,6 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin(
 
     this._input.emit();
     this._change.emit();
-    this._didChange.emit();
   }
 
   /** When an option is unselected in `multiple`, removes it from value and updates displayValue. */
@@ -531,7 +523,6 @@ class SbbSelectElement extends SbbUpdateSchedulerMixin(
 
       this._input.emit();
       this._change.emit();
-      this._didChange.emit();
     }
   }
 

diff --git a/src/elements/time-input/time-input.spec.ts b/src/elements/time-input/time-input.spec.ts
@@ -39,13 +39,25 @@ describe(`sbb-time-input`, () => {
   it('should emit form events', async () => {
     const changeSpy = new EventSpy('change', element);
     const inputSpy = new EventSpy('input', element);
+    const nativeInputSpy = new EventSpy('input', input);
+    const nativeChangeSpy = new EventSpy('change', input);
 
-    typeInElement(input, '1');
+    input.focus();
+    await sendKeys({ press: '1' });
     input.blur();
     await waitForLitRender(element);
 
-    expect(changeSpy.count).to.be.greaterThan(0);
-    expect(inputSpy.count).to.be.greaterThan(0);
+    await nativeChangeSpy.calledOnce().then(() => {
+      expect(input.value).to.be.equal('01:00');
+    });
+    await changeSpy.calledOnce().then(() => {
+      expect(input.value).to.be.equal('01:00');
+    });
+
+    expect(inputSpy.count, 'sbb-time-input input event').to.be.equal(2);
+    expect(changeSpy.count, 'sbb-time-input change event').to.be.equal(1);
+    expect(nativeInputSpy.count, 'input input event').to.be.equal(2);
+    expect(nativeChangeSpy.count, 'input change event').to.be.equal(1);
   });
 
   it('should emit validation change event', async () => {

diff --git a/src/elements/time-input/time-input.ts b/src/elements/time-input/time-input.ts
@@ -175,7 +175,12 @@ class SbbTimeInputElement extends LitElement {
     const isTimeValid = !!time && this._isTimeValid(time);
     const isEmptyOrValid = !value || value.trim() === '' || isTimeValid;
     if (isEmptyOrValid && time) {
-      this._inputElement.value = this._formatValue(time);
+      // In order to support React onChange event, we have to get the setter and call it.
+      // https://github.com/facebook/react/issues/11600#issuecomment-345813130
+      const setValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')!.set!;
+      setValue.call(this._inputElement, this._formatValue(time));
+
+      this._inputElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
     }
 
     const wasValid = !this._inputElement.hasAttribute('data-sbb-invalid');

diff --git a/src/elements/toggle-check/readme.md b/src/elements/toggle-check/readme.md
@@ -79,11 +79,10 @@ you can not provide it and then use `aria-label` to specify an appropriate label
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `change`    | `Event`             | Event fired on change.                                                           |                |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
-| `input`     | `InputEvent`        | Event fired on input.                                                            |                |
+| Name     | Type         | Description            | Inherited From |
+| -------- | ------------ | ---------------------- | -------------- |
+| `change` | `Event`      | Event fired on change. |                |
+| `input`  | `InputEvent` | Event fired on input.  |                |
 
 ## Slots
 

diff --git a/src/elements/toggle-check/toggle-check.ts b/src/elements/toggle-check/toggle-check.ts
@@ -13,7 +13,6 @@ import style from './toggle-check.scss?lit&inline';
  *
  * @slot - Use the unnamed slot to add content to the toggle label.
  * @slot icon - Use this slot to provide an icon. If `icon-name` is set, a sbb-icon will be used.
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {Event} change - Event fired on change.
  * @event {InputEvent} input - Event fired on input.
  */
@@ -22,9 +21,6 @@ export
 @slotState()
 class SbbToggleCheckElement extends SbbFormAssociatedCheckboxMixin(SbbIconNameMixin(LitElement)) {
   public static override styles: CSSResultGroup = style;
-  public static readonly events = {
-    didChange: 'didChange',
-  } as const;
 
   /** Size variant, either m, s or xs. */
   @property({ reflect: true }) public accessor size: 'xs' | 's' | 'm' = 's';

diff --git a/src/elements/toggle/toggle/readme.md b/src/elements/toggle/toggle/readme.md
@@ -44,10 +44,9 @@ The component has two different sizes, `s` and `m` (default), which can be set u
 
 ## Events
 
-| Name        | Type                | Description                                                                      | Inherited From |
-| ----------- | ------------------- | -------------------------------------------------------------------------------- | -------------- |
-| `change`    | `CustomEvent<void>` | Emits whenever the toggle value changes.                                         |                |
-| `didChange` | `CustomEvent<void>` | Deprecated. used for React. Will probably be removed once React 19 is available. |                |
+| Name     | Type                | Description                              | Inherited From |
+| -------- | ------------------- | ---------------------------------------- | -------------- |
+| `change` | `CustomEvent<void>` | Emits whenever the toggle value changes. |                |
 
 ## Slots
 

diff --git a/src/elements/toggle/toggle/toggle.ts b/src/elements/toggle/toggle/toggle.ts
@@ -21,7 +21,6 @@ import style from './toggle.scss?lit&inline';
  * It can be used as a container for two `sbb-toggle-option`, acting as a toggle button.
  *
  * @slot - Use the unnamed slot to add `<sbb-toggle-option>` elements to the toggle.
- * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
  * @event {CustomEvent<void>} change - Emits whenever the toggle value changes.
  */
 export
@@ -32,7 +31,6 @@ export
 class SbbToggleElement extends LitElement {
   public static override styles: CSSResultGroup = style;
   public static readonly events = {
-    didChange: 'didChange',
     change: 'change',
   } as const;
 
@@ -84,15 +82,6 @@ class SbbToggleElement extends LitElement {
     callback: () => this.updatePillPosition(true),
   });
 
-  /**
-   * @deprecated only used for React. Will probably be removed once React 19 is available.
-   * Emits whenever the toggle value changes.
-   */
-  private _didChange: EventEmitter = new EventEmitter(this, SbbToggleElement.events.didChange, {
-    bubbles: true,
-    composed: true,
-  });
-
   /** Emits whenever the toggle value changes. */
   private _change: EventEmitter = new EventEmitter(this, SbbToggleElement.events.change, {
     bubbles: true,
@@ -185,7 +174,6 @@ class SbbToggleElement extends LitElement {
   private _handleInput(): void {
     this.updatePillPosition(false);
     this._change.emit();
-    this._didChange.emit();
   }
 
   private _handleKeyDown(evt: KeyboardEvent): void {
-Original file line number
+Diff line change
@@ Expand Up @@
           this.dispatchEvent(new InputEvent('input', { composed: true, bubbles: true }));
           this.dispatchEvent(new Event('change', { bubbles: true }));
-          this.dispatchEvent(new CustomEvent('didChange', { bubbles: true }));
         };
       }
@@ Expand Down @@