diff --git a/.changeset/silly-laws-yell.md b/.changeset/silly-laws-yell.md new file mode 100644 index 0000000000..8c5eb88e09 --- /dev/null +++ b/.changeset/silly-laws-yell.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': patch +--- + +[select-rich] only close the overlay on tab when trapsKeyboardFocus is false diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js index 1c456dcdce..57c461642c 100644 --- a/packages/ui/components/select-rich/src/LionSelectRich.js +++ b/packages/ui/components/select-rich/src/LionSelectRich.js @@ -541,6 +541,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L switch (key) { case 'Tab': // Tab can only be caught in keydown + if (this._overlayCtrl.config.trapsKeyboardFocus === true) { + return; + } this.opened = false; break; case 'Escape': diff --git a/packages/ui/components/select-rich/test/lion-select-rich.test.js b/packages/ui/components/select-rich/test/lion-select-rich.test.js index de061f369f..11a72728d3 100644 --- a/packages/ui/components/select-rich/test/lion-select-rich.test.js +++ b/packages/ui/components/select-rich/test/lion-select-rich.test.js @@ -501,6 +501,18 @@ describe('lion-select-rich', () => { _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' })); expect(el.opened).to.be.false; }); + + it('does not close the listbox with [Tab] key once opened when trapsKeyboardFocus is true', async () => { + const el = await fixture( + html` + + `, + ); + // tab can only be caught via keydown + const { _listboxNode } = getSelectRichMembers(el); + _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' })); + expect(el.opened).to.be.true; + }); }); describe('Mouse navigation', () => {