fix(sbb-datepicker-toggle): fix datepicker toggle empty state synchro…

…nization (#3032)
sbb-design-systems · Aug 28, 2024 · cae910b · cae910b
1 parent 380a736
commit cae910b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
@@ -200,8 +200,17 @@ describe(`sbb-datepicker-toggle`, () => {
     await waitForLitRender(element);
 
     expect(input.value).to.be.equal('Sa, 01.01.2022');
+    expect(defaultDateAdapter.toIso8601(calendar.selected!)).to.be.equal('2022-01-01');
     expect(changeSpy.count).to.be.equal(1);
     expect(blurSpy.count).to.be.equal(1);
+
+    // Clear the input value and expect the calendar to clear the previous selected date
+    input.value = '';
+    input.dispatchEvent(new Event('input'));
+    input.dispatchEvent(new Event('change'));
+
+    expect(input.value).to.be.equal('');
+    expect(calendar.selected).to.be.null;
   });
 
   it('handles view property', async () => {

diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.ts
@@ -159,8 +159,8 @@ export class SbbDatepickerToggleElement<T = Date> extends SbbNegativeMixin(
 
   private _datePickerChanged(event: Event): void {
     this._datePickerElement = event.target as SbbDatepickerElement<T>;
-    if (this._calendarElement && this._datePickerElement.valueAsDate) {
-      this._calendarElement.selected = this._datePickerElement.valueAsDate;
+    if (this._calendarElement) {
+      this._calendarElement.selected = this._datePickerElement.valueAsDate || undefined;
     }
   }