ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
qa46hx 2021-06-30 14:59:20 +02:00
parent 0c6e8c2329
commit 7e75e18f6f
4 changed files with 45 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/blue-socks-prove.md Normal file
View file

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

1
packages/form-integrations/test/model-value-consistency.test.js
View file

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

14
packages/input-datepicker/src/LionInputDatepicker.js
View file

@ -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'

25
packages/input-datepicker/test/lion-input-datepicker.test.js
View file

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