fix(input-datepicker): set isTriggeredByUser on change via calendar

.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

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}`;

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'

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>: