From a51e28d7a520e45d4df71612b5ea27316d337a6c Mon Sep 17 00:00:00 2001
From: ByoungYong Kim <ryubro@users.noreply.github.com>
Date: Thu, 21 Nov 2024 15:40:12 +0100
Subject: [PATCH] Fix the issue that dynamically updated disabled date doesn't
 update the central date (#2411)

* Fix the issue that dynamically updated disabled date doesn't update the central date

* Fix types

* Remove setTimeout

* Add changeset

* Improve the changeset description
---
 .changeset/late-adults-ring.md                |  5 ++++
 .../components/calendar/src/LionCalendar.js   |  6 ++++-
 .../test/lion-input-datepicker.test.js        | 26 ++++++++++++++++++-
 3 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/late-adults-ring.md

diff --git a/.changeset/late-adults-ring.md b/.changeset/late-adults-ring.md
new file mode 100644
index 000000000..8d63e21da
--- /dev/null
+++ b/.changeset/late-adults-ring.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+fix(calendar): align central date with dynamic disabled dates
diff --git a/packages/ui/components/calendar/src/LionCalendar.js b/packages/ui/components/calendar/src/LionCalendar.js
index f8c80f2af..f899172af 100644
--- a/packages/ui/components/calendar/src/LionCalendar.js
+++ b/packages/ui/components/calendar/src/LionCalendar.js
@@ -364,7 +364,11 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (this.selectedDate) {
       this.focusSelectedDate();
     } else {
-      this.centralDate = /** @type {Date} */ (this.__initialCentralDate);
+      if (!this.__isEnabledDate(/** @type {Date} */ (this.__initialCentralDate))) {
+        this.centralDate = this.findNearestEnabledDate(this.__initialCentralDate);
+      } else {
+        this.centralDate = /** @type {Date} */ (this.__initialCentralDate);
+      }
       this.focusCentralDate();
     }
   }
diff --git a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
index a4c2b90ea..ec8eca69b 100644
--- a/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
+++ b/packages/ui/components/input-datepicker/test/lion-input-datepicker.test.js
@@ -19,9 +19,10 @@ import '@lion/ui/define/lion-input-datepicker.js';
  */
 function getProtectedMembersDatepicker(datepickerEl) {
   // @ts-ignore
-  const { __invokerId: invokerId } = datepickerEl;
+  const { __invokerId: invokerId, _calendarNode: calendarNode } = datepickerEl;
   return {
     invokerId,
+    calendarNode,
   };
 }
 
@@ -410,6 +411,29 @@ describe('<lion-input-datepicker>', () => {
         expect(el.__calendarMaxDate.toString()).to.equal(new Date('2019/07/15').toString());
       });
 
+      it('should update the central date of Calendar if updated validator made the current central date disabled', async () => {
+        const initialValidators = [new MaxDate(new Date('2000/01/01'))];
+        const updatedValidators = [new MaxDate(new Date('2020/01/01'))];
+
+        const el = await fixture(html`
+          <lion-input-datepicker .validators="${initialValidators}"></lion-input-datepicker>
+        `);
+        const obj = new DatepickerInputObject(el);
+        await obj.openCalendar();
+
+        expect(getProtectedMembersDatepicker(el).calendarNode.centralDate.toString()).to.equal(
+          new Date('2000/01/01').toString(),
+        );
+
+        await obj.closeCalendar();
+        el.validators = updatedValidators;
+        await obj.openCalendar();
+
+        expect(getProtectedMembersDatepicker(el).calendarNode.centralDate.toString()).to.equal(
+          new Date('2020/01/01').toString(),
+        );
+      });
+
       it('should show error on invalid date passed to modelValue', async () => {
         const myDate = new Date('foo');
         const el = await fixture(html`