fix the bug that disabled date becomes central date (#2361)

* fix the bug that disabled date becomes central date * add test * Fix tests * Fix lint error * Add changeset * Fix a typo
ing-bank · Sep 16, 2024 · bb1f347 · bb1f347
1 parent 9f7935c
commit bb1f347
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 11 deletions.
diff --git a/.changeset/serious-mails-matter.md b/.changeset/serious-mails-matter.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[calendar] Now central date would be nearest enabled date if today is disabled
diff --git a/packages/ui/components/calendar/src/LionCalendar.js b/packages/ui/components/calendar/src/LionCalendar.js
@@ -270,11 +270,6 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
 
     this.__connectedCallbackDone = true;
 
-    this.__calculateInitialCentralDate();
-
-    // setup data for initial render
-    this.__data = this.__createData();
-
     /**
      * This logic needs to happen on firstUpdated, but every time the DOM node is moved as well
      * since firstUpdated only runs once, this logic is moved here, but after updateComplete
@@ -305,6 +300,13 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
+  firstUpdated() {
+    this.__calculateInitialCentralDate();
+
+    // setup data for initial render
+    this.__data = this.__createData();
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
     if (this.__contentWrapperElement) {
@@ -372,6 +374,8 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     if (this.centralDate === this.__today && this.selectedDate) {
       // initialized with selectedDate only if user didn't provide another one
       this.centralDate = this.selectedDate;
+    } else if (!this.__isEnabledDate(this.centralDate)) {
+      this.centralDate = this.findNearestEnabledDate(this.centralDate);
     }
     /** @type {Date} */
     this.__initialCentralDate = this.centralDate;

diff --git a/packages/ui/components/calendar/test/lion-calendar.test.js b/packages/ui/components/calendar/test/lion-calendar.test.js
@@ -465,9 +465,8 @@ describe('<lion-calendar>', () => {
         `);
 
         clock.restore();
-        expect(isSameDate(el.centralDate, new Date('2019/06/03')), 'central date').to.be.true;
-        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03')), 'central date').to.be
-          .true;
+        expect(isSameDate(el.centralDate, new Date('2019/07/03'))).to.be.true;
+        expect(isSameDate(elSetting.centralDate, new Date('2019/07/03'))).to.be.true;
       });
 
       describe('Normalization', () => {
@@ -573,7 +572,7 @@ describe('<lion-calendar>', () => {
               .disableDates="${/** @param {Date} d */ d => d.getDate() === 15}"
             ></lion-calendar>
           `);
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           const elObj = new CalendarObject(el);
@@ -590,7 +589,7 @@ describe('<lion-calendar>', () => {
               .disableDates="${/** @param {Date} d */ d => d.getFullYear() > 1998}"
             ></lion-calendar>
           `);
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           expect(el.centralDate.getFullYear()).to.equal(1998);
@@ -609,7 +608,7 @@ describe('<lion-calendar>', () => {
             ></lion-calendar>
           `);
 
-          el.focusDate(el.findNearestEnabledDate());
+          el.focusDate(el.findNearestEnabledDate(new Date()));
           await el.updateComplete;
 
           expect(el.centralDate.getFullYear()).to.equal(2002);
@@ -1262,6 +1261,34 @@ describe('<lion-calendar>', () => {
 
           clock.restore();
         });
+
+        it('is nearest to today if no selected date is available and today is disabled', async () => {
+          const clock = sinon.useFakeTimers({ now: new Date('2000/12/15').getTime() });
+
+          const calWithMin = await fixture(
+            html`<lion-calendar .minDate=${new Date('2000/12/25')}></lion-calendar>`,
+          );
+          const calObjWithMin = new CalendarObject(calWithMin);
+          expect(calObjWithMin.centralDayObj?.monthday).to.equal(25);
+
+          const calWithMax = await fixture(
+            html`<lion-calendar .maxDate=${new Date('2000/12/05')}></lion-calendar>`,
+          );
+          const calObjWithMax = new CalendarObject(calWithMax);
+          expect(calObjWithMax.centralDayObj?.monthday).to.equal(5);
+
+          const calWithDisabled = await fixture(
+            html`<lion-calendar
+              .disableDates=${/** @param {Date} date */ date => date.getDate() === 15}
+            ></lion-calendar>`,
+          );
+          await calWithDisabled.updateComplete;
+
+          const calObjWithDisabled = new CalendarObject(calWithDisabled);
+          expect(calObjWithDisabled.centralDayObj?.monthday).to.equal(16);
+
+          clock.restore();
+        });
       });
 
       /**