diff --git a/.changeset/kind-clouds-kiss.md b/.changeset/kind-clouds-kiss.md new file mode 100644 index 000000000..f536078da --- /dev/null +++ b/.changeset/kind-clouds-kiss.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +Fix [ArrowUp]/[ArrowDown] not registering as user interaction when done directly on the select-rich component diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js index 2c3dac4a3..1c456dcdc 100644 --- a/packages/ui/components/select-rich/src/LionSelectRich.js +++ b/packages/ui/components/select-rich/src/LionSelectRich.js @@ -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': diff --git a/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js b/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js index 99be5870d..ef43ec63e 100644 --- a/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js +++ b/packages/ui/components/select-rich/test/lion-select-rich-interaction.test.js @@ -106,9 +106,15 @@ describe('lion-select-rich interactions', () => { }); } + let isTriggeredByUser; const el = /** @type {LionSelectRich} */ ( await fixture(html` - + Item 1 Item 2 @@ -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 () => {