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

fix(select-rich): only close the overlay on tab when trapsKeyboardFocus is false (#2273)

Browse source
This commit is contained in:
gerjanvangeest 2024-04-29 10:44:01 +02:00 committed by GitHub
parent 2b6884581a
commit 36f0bbce3c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 20 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/silly-laws-yell.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[select-rich] only close the overlay on tab when trapsKeyboardFocus is false

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

@ -541,6 +541,9 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
switch (key) { switch (key) {
case 'Tab': case 'Tab':
// Tab can only be caught in keydown // Tab can only be caught in keydown
if (this._overlayCtrl.config.trapsKeyboardFocus === true) {
return;
}
this.opened = false; this.opened = false;
break; break;
case 'Escape': case 'Escape':

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

@ -501,6 +501,18 @@ describe('lion-select-rich', () => {
_listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' })); _listboxNode.dispatchEvent(new KeyboardEvent('keydown', { key: 'Tab' }));
expect(el.opened).to.be.false; 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`
<lion-select-rich opened .config=${{ trapsKeyboardFocus: true }}> </lion-select-rich>
`,
);
// 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', () => { describe('Mouse navigation', () => {