From 0e78beadc8e7fb16657e8baafb83bfe872f42a39 Mon Sep 17 00:00:00 2001
From: Jeremias Peier <jeremias.peier@sbb.ch>
Date: Wed, 27 Nov 2024 12:21:56 +0100
Subject: [PATCH] fix: fix datepicker

---
 .../datepicker/datepicker/datepicker.spec.ts   |  4 ++++
 .../datepicker/datepicker/datepicker.ts        | 18 +++++++++++++++---
 src/elements/datepicker/datepicker/readme.md   |  1 +
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/elements/datepicker/datepicker/datepicker.spec.ts b/src/elements/datepicker/datepicker/datepicker.spec.ts
index 3e4b6047f2..c62ceafbc0 100644
--- a/src/elements/datepicker/datepicker/datepicker.spec.ts
+++ b/src/elements/datepicker/datepicker/datepicker.spec.ts
@@ -82,11 +82,15 @@ describe(`sbb-datepicker`, () => {
 
       it('renders and emit event on value change', async () => {
         const changeSpy = new EventSpy('change', element);
+        const inputSpy = new EventSpy('input', element);
         typeInElement(input, '20/01/2023');
+        expect(inputSpy.count).to.be.equal(10);
+
         button.focus();
         await changeSpy.calledOnce();
         expect(input.value).to.be.equal('Fr, 20.01.2023');
         expect(changeSpy.count).to.be.equal(1);
+        expect(inputSpy.count).to.be.equal(11);
       });
 
       it('renders and interpret two digit year correctly in 2000s', async () => {
diff --git a/src/elements/datepicker/datepicker/datepicker.ts b/src/elements/datepicker/datepicker/datepicker.ts
index 56e2ab93b7..1e23d0c3dc 100644
--- a/src/elements/datepicker/datepicker/datepicker.ts
+++ b/src/elements/datepicker/datepicker/datepicker.ts
@@ -13,7 +13,7 @@ import { SbbConnectedAbortController, SbbLanguageController } from '../../core/c
 import { type DateAdapter, defaultDateAdapter } from '../../core/datetime.js';
 import { forceType } from '../../core/decorators.js';
 import { findInput, findReferencedElement } from '../../core/dom.js';
-import { EventEmitter } from '../../core/eventing.js';
+import { EventEmitter, forwardEventToHost } from '../../core/eventing.js';
 import { i18nDateChangedTo, i18nDatePickerPlaceholder } from '../../core/i18n.js';
 import type { SbbDateLike, SbbValidationChangeEvent } from '../../core/interfaces.js';
 import type { SbbDatepickerButton } from '../common.js';
@@ -57,6 +57,7 @@ export const datepickerControlRegisteredEventFactory = (): CustomEvent =>
  * Combined with a native input, it displays the input's value as a formatted date.
  *
  * @event {CustomEvent<void>} change - Notifies that the connected input has changes.
+ * @event {CustomEvent<void>} input - Notifies that the connected input fired the input event.
  * @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.
  * @event {CustomEvent<SbbValidationChangeEvent>} validationChange - Emits whenever the internal validation state changes.
@@ -239,7 +240,14 @@ class SbbDatepickerElement<T = Date> extends LitElement {
       }
 
       const options: AddEventListenerOptions = { signal: this._datePickerController.signal };
-      input.addEventListener('input', () => this._parseInput(), options);
+      input.addEventListener(
+        'input',
+        (e) => {
+          forwardEventToHost(e, this);
+          this._parseInput();
+        },
+        options,
+      );
       input.addEventListener('change', () => this._handleInputChange(), options);
       this._parseInput(true);
       this._tryApplyFormatToInput();
@@ -268,7 +276,11 @@ class SbbDatepickerElement<T = Date> extends LitElement {
 
     const formattedDate = this.valueAsDate ? this._dateAdapter.format(this.valueAsDate!) : '';
     if (formattedDate && this._inputElement.value !== formattedDate) {
-      this._inputElement.value = formattedDate;
+      // 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, formattedDate);
+
       this._inputElement.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
       this._inputElement.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
       return true;
diff --git a/src/elements/datepicker/datepicker/readme.md b/src/elements/datepicker/datepicker/readme.md
index e181918f61..c20f66281a 100644
--- a/src/elements/datepicker/datepicker/readme.md
+++ b/src/elements/datepicker/datepicker/readme.md
@@ -93,5 +93,6 @@ 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.                        |                |
+| `input`             | `CustomEvent<void>`                     | Notifies that the connected input fired the input event.                            |                |
 | `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.                               |                |