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

fix: 'isTriggeredByUser' support for listbox (descendants)

Browse source
This commit is contained in:
Thijs Louisse 2021-03-25 09:59:50 +01:00
parent 86f1ba4a52
commit ca15374a12
3 changed files with 48 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/wise-moles-teach.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/listbox': patch
---
listbox (descendants) add `isTriggeredByUser` meta data to `model-value-changed` event on keyboard interaction

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

@ -396,10 +396,11 @@ describe('detail.isTriggeredByUser', () => {
} }
/** /**
* @param {FormControl & {value: string}} el * @param {FormControl & {value: string;}} el
* @param {string} newViewValue * @param {string} newViewValue
* @param {string | undefined} [triggerType]
*/ */
function mimicUserInput(el, newViewValue) { function mimicUserInput(el, newViewValue, triggerType) {
const type = detectType(el); const type = detectType(el);
let userInputEv; let userInputEv;
if (type === 'RegularField') { if (type === 'RegularField') {
@ -409,7 +410,14 @@ describe('detail.isTriggeredByUser', () => {
} else if (type === 'ChoiceField') { } else if (type === 'ChoiceField') {
el._inputNode.dispatchEvent(new Event('change', { bubbles: true })); el._inputNode.dispatchEvent(new Event('change', { bubbles: true }));
} else if (type === 'OptionChoiceField') { } else if (type === 'OptionChoiceField') {
el.dispatchEvent(new Event('click', { bubbles: true })); if (!triggerType) {
el.dispatchEvent(new Event('click', { bubbles: true }));
} else if (triggerType === 'keypress') {
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowDown', bubbles: true }));
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown', bubbles: true }));
el.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter', bubbles: true }));
}
} }
} }
@ -459,9 +467,12 @@ describe('detail.isTriggeredByUser', () => {
} }
/** /**
* @param {FormControl & {value: string}} formControl * @param {FormControl & {value: string;}} formControl
* @param {boolean | undefined} [testKeyboardBehavior]
*/ */
function expectCorrectEventMetaChoiceField(formControl) { function expectCorrectEventMetaChoiceField(formControl, testKeyboardBehavior) {
const type = detectType(formControl);
resetChoiceFieldToForceRepropagation(formControl); resetChoiceFieldToForceRepropagation(formControl);
mimicUserInput(formControl, 'userValue'); mimicUserInput(formControl, 'userValue');
expect(spy.firstCall.args[0].detail.isTriggeredByUser).to.be.true; expect(spy.firstCall.args[0].detail.isTriggeredByUser).to.be.true;
@ -474,6 +485,16 @@ describe('detail.isTriggeredByUser', () => {
// eslint-disable-next-line no-param-reassign // eslint-disable-next-line no-param-reassign
formControl.modelValue = { value: 'programmaticValue', checked: false }; formControl.modelValue = { value: 'programmaticValue', checked: false };
expect(spy.secondCall.args[0].detail.isTriggeredByUser).to.be.false; expect(spy.secondCall.args[0].detail.isTriggeredByUser).to.be.false;
if (type === 'OptionChoiceField' && testKeyboardBehavior) {
resetChoiceFieldToForceRepropagation(formControl);
mimicUserInput(formControl, 'userValue', 'keypress');
try {
expect(spy.firstCall.args[0].detail.isTriggeredByUser).to.be.true;
} catch (e) {
console.log(formControl);
}
}
} }
// 1. Derive the type of field we're dealing with // 1. Derive the type of field we're dealing with
@ -494,7 +515,7 @@ describe('detail.isTriggeredByUser', () => {
); );
el.appendChild(childrenEls); el.appendChild(childrenEls);
await el.registrationComplete; await el.registrationComplete;
expectCorrectEventMetaChoiceField(el.formElements[0]); expectCorrectEventMetaChoiceField(el.formElements[0], true);
} else if (type === 'FormOrFieldset') { } else if (type === 'FormOrFieldset') {
const childrenEls = await fixture( const childrenEls = await fixture(
html`<div><lion-input name="one"></lion-input><lion-input name="two"></lion-input></div>`, html`<div><lion-input name="one"></lion-input><lion-input name="two"></lion-input></div>`,

17
packages/listbox/src/ListboxMixin.js
View file

@ -486,6 +486,13 @@ const ListboxMixinImplementation = superclass =>
return; return;
} }
this.__isHandlingUserInput = true;
setTimeout(() => {
// Since we can't control when subclasses are done handling keyboard input, we
// schedule a timeout to reset __isHandlingUserInput
this.__isHandlingUserInput = false;
});
const { key } = ev; const { key } = ev;
switch (key) { switch (key) {
@ -586,6 +593,14 @@ const ListboxMixinImplementation = superclass =>
if (this.disabled) { if (this.disabled) {
return; return;
} }
this.__isHandlingUserInput = true;
setTimeout(() => {
// Since we can't control when subclasses are done handling keyboard input, we
// schedule a timeout to reset __isHandlingUserInput
this.__isHandlingUserInput = false;
});
const { key } = ev; const { key } = ev;
// eslint-disable-next-line default-case // eslint-disable-next-line default-case
switch (key) { switch (key) {
@ -702,7 +717,7 @@ const ListboxMixinImplementation = superclass =>
new CustomEvent('model-value-changed', { new CustomEvent('model-value-changed', {
detail: /** @type {ModelValueEventDetails} */ ({ detail: /** @type {ModelValueEventDetails} */ ({
formPath: ev.detail.formPath, formPath: ev.detail.formPath,
isTriggeredByUser: ev.detail.isTriggeredByUser, isTriggeredByUser: ev.detail.isTriggeredByUser || this.__isHandlingUserInput,
element: ev.target, element: ev.target,
}), }),
}), }),