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

fix(select-rich): block arrow key interaction when singleOption is set (#2474)

Browse source
This commit is contained in:
gerjanvangeest 2025-02-13 14:35:52 +01:00 committed by GitHub
parent 933a0ea089
commit d86c1f7439
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 19 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/rare-walls-lay.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/ui': patch
---
[select-rich] block arrow key interaction when singleOption is set

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

@ -491,7 +491,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
*/ */
// TODO: rename to #invokerOnKeyUp() (and move event listener to the invoker) in v1 // TODO: rename to #invokerOnKeyUp() (and move event listener to the invoker) in v1
__onKeyUp(ev) { __onKeyUp(ev) {
if (this.disabled || this.readOnly) { if (this.disabled || this.readOnly || this.singleOption) {
return; return;
} }

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

@ -342,7 +342,7 @@ describe('lion-select-rich', () => {
expect(elSingleoption.opened).to.be.false; expect(elSingleoption.opened).to.be.false;
}); });
it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => { it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode or has a single option', async () => {
const elReadOnly = await fixture(html` const elReadOnly = await fixture(html`
<lion-select-rich readonly> <lion-select-rich readonly>
<lion-option .choiceValue=${10}>Item 1</lion-option> <lion-option .choiceValue=${10}>Item 1</lion-option>
@ -350,11 +350,23 @@ describe('lion-select-rich', () => {
</lion-select-rich> </lion-select-rich>
`); `);
const elSingleOption = await fixture(html`
<lion-select-rich>
<lion-option .choiceValue=${10}>Item 1</lion-option>
</lion-select-rich>
`);
elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' })); elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
expect(elReadOnly.opened).to.be.false; expect(elReadOnly.opened).to.be.false;
elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' })); elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
expect(elReadOnly.opened).to.be.false; expect(elReadOnly.opened).to.be.false;
elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' }));
expect(elSingleOption.opened).to.be.false;
elSingleOption.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
expect(elSingleOption.opened).to.be.false;
}); });
it('sets inheritsReferenceWidth to min by default', async () => { it('sets inheritsReferenceWidth to min by default', async () => {