Use model value chain instead of hard-coding formatted value and value (

#2362) * Use model value chain instead of hard-coding formatted value and value * Add test * Add changeset
ing-bank · Sep 12, 2024 · 9f7935c · 9f7935c
1 parent 287d34f
commit 9f7935c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 21 deletions.
diff --git a/.changeset/chilly-teachers-compare.md b/.changeset/chilly-teachers-compare.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[input-datepicker] Fix a locale bug
diff --git a/packages/ui/components/input-datepicker/src/LionInputDatepicker.js b/packages/ui/components/input-datepicker/src/LionInputDatepicker.js
@@ -102,23 +102,6 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     };
   }
 
-  _inputFormatter = new Intl.DateTimeFormat('en-US', {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  }).formatToParts;
-
-  /**
-   * @param {Date} date
-   */
-  // eslint-disable-next-line class-methods-use-this
-  _formatDate(date) {
-    const day = String(date.getDate()).padStart(2, '0');
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const year = String(date.getFullYear());
-    return `${day}/${month}/${year}`;
-  }
-
   get slots() {
     return {
       ...super.slots,
@@ -370,18 +353,15 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     if (this._syncOnUserSelect) {
       // Synchronize new selectedDate value to input
       this._isHandlingUserInput = true;
+      this._isHandlingCalendarUserInput = true;
 
       if (
         Array.isArray(this.__calendarDisableDates) &&
         this.__calendarDisableDates.includes(selectedDate)
       ) {
         // If the selected date is disabled, reset the values
-        this.value = '';
-        this.formattedValue = '';
         this.modelValue = undefined;
       } else {
-        this.formattedValue = this._formatDate(selectedDate);
-        this.value = this.formattedValue;
         this.modelValue = selectedDate;
       }
 

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
@@ -263,6 +263,33 @@ describe('<lion-input-datepicker>', () => {
       expect(el.value).to.equal('18/12/2019');
     });
 
+    describe('localization', () => {
+      /** @type {import('@lion/ui/localize.js').LocalizeManager} */ let localizeManager;
+
+      before(async () => {
+        const { getLocalizeManager } = await import('@lion/ui/localize-no-side-effects.js');
+        localizeManager = getLocalizeManager();
+      });
+
+      it('should update formatted value and value in accordance of localization upon model value update', async () => {
+        localizeManager.locale = 'nl-NL';
+
+        const el = await fixture(html`
+          <lion-input-datepicker .modelValue="${new Date('2022/12/30')}"></lion-input-datepicker>
+        `);
+
+        await el.updateComplete;
+
+        expect(el.formattedValue).to.equal('30-12-2022');
+        expect(el.value).to.equal('30-12-2022');
+      });
+
+      after(() => {
+        // @ts-ignore - using protected method to undo setting explict locale
+        localizeManager.locale = localizeManager._fallbackLocale;
+      });
+    });
+
     describe('Validators', () => {
       /**
        * Validators are the Application Developer facing API in <lion-input-datepicker>: