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

Fix select rich key interaction not setting correct isTriggeredByUser value (#2262)

Browse source 
* 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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/kind-clouds-kiss.md Normal file
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

7
packages/ui/components/select-rich/src/LionSelectRich.js
View file

@ -485,6 +485,13 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
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;
switch (key) {
case 'ArrowUp':

12
packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js
View file

@ -106,9 +106,15 @@ describe('lion-select-rich interactions', () => {
});
}
let isTriggeredByUser;
const el = /** @type {LionSelectRich} */ (
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-option .choiceValue=${10}>Item 1</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' }));
expect(el.checkedIndex).to.equal(1);
expectOnlyGivenOneOptionToBeChecked(options, 1);
expect(isTriggeredByUser).to.be.true;
isTriggeredByUser = false;
el.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
expect(el.checkedIndex).to.equal(0);
expectOnlyGivenOneOptionToBeChecked(options, 0);
expect(isTriggeredByUser).to.be.true;
});
it('checkes a value with [character] keys while listbox unopened', async () => {