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:
SomaH 2024-04-23 10:27:17 +02:00 committed by GitHub
parent 341a9d051a
commit 3a1482f751
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 23 additions and 1 deletions

View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
Fix [ArrowUp]/[ArrowDown] not registering as user interaction when done directly on the select-rich component

View file

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

View file

@ -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 () => {