feat(datepicker): when datepicker value updated datepicker input valu… (#983)

…e should also updated

Author: dilandoogan

src/components/datepicker/bl-datepicker.test.ts

@@ -1,4 +1,4 @@
-import { aTimeout, expect, fixture, html } from "@open-wc/testing";
+import { aTimeout, elementUpdated, expect, fixture, html } from "@open-wc/testing";
 import { BlButton, BlDatePicker } from "../../baklava";
 import { CALENDAR_TYPES } from "../calendar/bl-calendar.constant";
 import sinon from "sinon";
@@ -385,4 +385,13 @@ describe("BlDatepicker", () => {
     expect(focusSpy.called).to.be.true;
   });
 
+  it("should call setDatePickerInput when _selectedDates changes", async () => {
+    const setDatePickerInputSpy = sinon.spy(element, "setDatePickerInput");
+
+    element.value = [new Date(2025,0,10)];
+    await elementUpdated(element);
+
+    expect(setDatePickerInputSpy).to.have.been.calledOnceWith(element._selectedDates);
+  });
+
 });

src/components/datepicker/bl-datepicker.ts

@@ -1,4 +1,4 @@
-import { CSSResultGroup, html, TemplateResult } from "lit";
+import { CSSResultGroup, html, PropertyValues, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { BlCalendar, BlPopover } from "../../baklava";
 import DatepickerCalendarMixin from "../../mixins/datepicker-calendar-mixin/datepicker-calendar-mixin";
@@ -197,6 +197,12 @@ export default class BlDatepicker extends DatepickerCalendarMixin {
     }
   }
 
+  updated(changedProperties: PropertyValues) {
+    if (changedProperties.has("_selectedDates")) {
+      this.setDatePickerInput(this._selectedDates);
+    }
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     this._calendarEl?.removeEventListener("mousedown", this._onCalendarMouseDown);