From 9f7935c1a3953467493bee8bf81d9c46733dae4e Mon Sep 17 00:00:00 2001
From: ByoungYong Kim <ryubro@users.noreply.github.com>
Date: Thu, 12 Sep 2024 14:50:22 +0200
Subject: [PATCH] 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
---
 .changeset/chilly-teachers-compare.md         |  5 ++++
 .../src/LionInputDatepicker.js                | 22 +--------------
 .../test/lion-input-datepicker.test.js        | 27 +++++++++++++++++++
 3 files changed, 33 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/chilly-teachers-compare.md

diff --git a/.changeset/chilly-teachers-compare.md b/.changeset/chilly-teachers-compare.md
new file mode 100644
index 0000000000..8adfefb780
--- /dev/null
+++ 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
index d9ac1d6c76..43f3c74ece 100644
--- 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
index dd4361f699..a4c2b90eaf 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
@@ -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>: