From cae910b1e93b19e680c98967af4646617c1d9f1d Mon Sep 17 00:00:00 2001
From: Marco D'Auria <101181211+dauriamarco@users.noreply.github.com>
Date: Wed, 28 Aug 2024 11:02:55 +0200
Subject: [PATCH] fix(sbb-datepicker-toggle): fix datepicker toggle empty state
 synchronization (#3032)

---
 .../datepicker-toggle/datepicker-toggle.spec.ts          | 9 +++++++++
 .../datepicker/datepicker-toggle/datepicker-toggle.ts    | 4 ++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts b/src/elements/datepicker/datepicker-toggle/datepicker-toggle.spec.ts
index fee27a320b..f911d8e979 100644
--- 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
index 539f04ded4..0296c1c6e9 100644
--- 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;
     }
   }