From 7e75e18f6fd55fb1897ffc5b4b7f0236c521458e Mon Sep 17 00:00:00 2001
From: qa46hx <Gerjan.van.Geest@ing.com>
Date: Wed, 30 Jun 2021 14:59:20 +0200
Subject: [PATCH] fix(input-datepicker): set isTriggeredByUser on change via
 calendar

---
 .changeset/blue-socks-prove.md                |  5 ++++
 .../test/model-value-consistency.test.js      |  1 +
 .../src/LionInputDatepicker.js                | 14 +++++++++++
 .../test/lion-input-datepicker.test.js        | 25 +++++++++++++++++++
 4 files changed, 45 insertions(+)
 create mode 100644 .changeset/blue-socks-prove.md

diff --git a/.changeset/blue-socks-prove.md b/.changeset/blue-socks-prove.md
new file mode 100644
index 000000000..96b6e7505
--- /dev/null
+++ b/.changeset/blue-socks-prove.md
@@ -0,0 +1,5 @@
+---
+'@lion/input-datepicker': patch
+---
+
+set isTriggeredByUser in model-value-changed event to true, when value has been changed via the calendar
diff --git a/packages/form-integrations/test/model-value-consistency.test.js b/packages/form-integrations/test/model-value-consistency.test.js
index c74c09467..7b11e98f6 100644
--- a/packages/form-integrations/test/model-value-consistency.test.js
+++ b/packages/form-integrations/test/model-value-consistency.test.js
@@ -451,6 +451,7 @@ describe('detail.isTriggeredByUser', () => {
 
   allFormControls.forEach(controlName => {
     it(`lion-${controlName} adds "detail.isTriggeredByUser" to model-value-changed event`, async () => {
+      // TODO: add test for user input via calendar
       const spy = sinon.spy();
 
       const tagname = `lion-${controlName}`;
diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js
index c7df411b9..c1065cfbe 100644
--- a/packages/input-datepicker/src/LionInputDatepicker.js
+++ b/packages/input-datepicker/src/LionInputDatepicker.js
@@ -193,6 +193,8 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     this._hideOnUserSelect = true;
     /** @protected */
     this._syncOnUserSelect = true;
+    /** @protected */
+    this._isHandlingCalendarUserInput = false;
 
     /** @private */
     this.__openCalendarOverlay = this.__openCalendarOverlay.bind(this);
@@ -374,10 +376,22 @@ export class LionInputDatepicker extends ScopedElementsMixin(
     }
     if (this._syncOnUserSelect) {
       // Synchronize new selectedDate value to input
+      this._isHandlingUserInput = true;
+      this._isHandlingCalendarUserInput = true;
       this.modelValue = selectedDate;
+      this._isHandlingUserInput = false;
+      this._isHandlingCalendarUserInput = false;
     }
   }
 
+  /**
+   * @enhance FormatMixin: sync to view value after handling calendar user input
+   * @protected
+   */
+  _reflectBackOn() {
+    return super._reflectBackOn() || this._isHandlingCalendarUserInput;
+  }
+
   /**
    * The LionCalendar shouldn't know anything about the modelValue;
    * it can't handle Unparseable dates, but does handle 'undefined'
diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js
index 47a04ba0a..984b1dde0 100644
--- a/packages/input-datepicker/test/lion-input-datepicker.test.js
+++ b/packages/input-datepicker/test/lion-input-datepicker.test.js
@@ -243,6 +243,31 @@ describe('<lion-input-datepicker>', () => {
       ).to.be.true;
     });
 
+    it('fires model-value-changed with isTriggeredByUser on click', async () => {
+      let isTriggeredByUser;
+      const myDate = new Date('2019/12/15');
+      const myOtherDate = new Date('2019/12/18');
+      const el = await fixture(html`
+        <lion-input-datepicker
+          .modelValue="${myDate}"
+          @model-value-changed="${(/** @type {CustomEvent} */ event) => {
+            isTriggeredByUser = event.detail.isTriggeredByUser;
+          }}"
+        >
+        </lion-input-datepicker>
+      `);
+
+      const elObj = new DatepickerInputObject(el);
+      // Make sure the calendar overlay is opened
+      await elObj.openCalendar();
+      expect(elObj.overlayController.isShown).to.equal(true);
+      // Mimic user input: should fire the 'user-selected-date-changed' event
+      await elObj.selectMonthDay(myOtherDate.getDate());
+      await el.updateComplete; // safari take a little longer
+      expect(isTriggeredByUser).to.be.true;
+      expect(el.value).to.equal('18/12/2019');
+    });
+
     describe('Validators', () => {
       /**
        * Validators are the Application Developer facing API in <lion-input-datepicker>: