Fix select rich key interaction not setting correct isTriggeredByUser value (#2262)
* fix: select-rich keyboard navigation not marked as isTriggeredByUser * Add changeset
This commit is contained in:
parent
341a9d051a
commit
3a1482f751
3 changed files with 23 additions and 1 deletions
5
.changeset/kind-clouds-kiss.md
Normal file
5
.changeset/kind-clouds-kiss.md
Normal file
|
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
'@lion/ui': patch
|
||||||
|
---
|
||||||
|
|
||||||
|
Fix [ArrowUp]/[ArrowDown] not registering as user interaction when done directly on the select-rich component
|
||||||
|
|
@ -485,6 +485,13 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
|
||||||
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) {
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
|
|
|
||||||
|
|
@ -106,9 +106,15 @@ describe('lion-select-rich interactions', () => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let isTriggeredByUser;
|
||||||
const el = /** @type {LionSelectRich} */ (
|
const el = /** @type {LionSelectRich} */ (
|
||||||
await fixture(html`
|
await fixture(html`
|
||||||
<lion-select-rich interaction-mode="windows/linux">
|
<lion-select-rich
|
||||||
|
interaction-mode="windows/linux"
|
||||||
|
@model-value-changed="${(/** @type {CustomEvent} */ event) => {
|
||||||
|
isTriggeredByUser = event.detail.isTriggeredByUser;
|
||||||
|
}}"
|
||||||
|
>
|
||||||
<lion-options slot="input">
|
<lion-options slot="input">
|
||||||
<lion-option .choiceValue=${10}>Item 1</lion-option>
|
<lion-option .choiceValue=${10}>Item 1</lion-option>
|
||||||
<lion-option .choiceValue=${20}>Item 2</lion-option>
|
<lion-option .choiceValue=${20}>Item 2</lion-option>
|
||||||
|
|
@ -125,10 +131,14 @@ describe('lion-select-rich interactions', () => {
|
||||||
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
|
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
|
||||||
expect(el.checkedIndex).to.equal(1);
|
expect(el.checkedIndex).to.equal(1);
|
||||||
expectOnlyGivenOneOptionToBeChecked(options, 1);
|
expectOnlyGivenOneOptionToBeChecked(options, 1);
|
||||||
|
expect(isTriggeredByUser).to.be.true;
|
||||||
|
|
||||||
|
isTriggeredByUser = false;
|
||||||
|
|
||||||
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
|
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
|
||||||
expect(el.checkedIndex).to.equal(0);
|
expect(el.checkedIndex).to.equal(0);
|
||||||
expectOnlyGivenOneOptionToBeChecked(options, 0);
|
expectOnlyGivenOneOptionToBeChecked(options, 0);
|
||||||
|
expect(isTriggeredByUser).to.be.true;
|
||||||
});
|
});
|
||||||
|
|
||||||
it('checkes a value with [character] keys while listbox unopened', async () => {
|
it('checkes a value with [character] keys while listbox unopened', async () => {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue