diff --git a/.changeset/fifty-shrimps-float.md b/.changeset/fifty-shrimps-float.md new file mode 100644 index 000000000..c3fb13ae3 --- /dev/null +++ b/.changeset/fifty-shrimps-float.md @@ -0,0 +1,5 @@ +--- +'@lion/ui': minor +--- + +[select-rich] fix readonly keyboard interaction diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js index 18828d15b..2c3dac4a3 100644 --- a/packages/ui/components/select-rich/src/LionSelectRich.js +++ b/packages/ui/components/select-rich/src/LionSelectRich.js @@ -477,7 +477,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L */ // TODO: rename to _onKeyUp in v1 __onKeyUp(ev) { - if (this.disabled) { + if (this.disabled || this.readOnly) { return; } 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 2c989d092..de061f369 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 @@ -316,6 +316,21 @@ describe('lion-select-rich', () => { expect(elSingleoption.opened).to.be.false; }); + it('stays closed with [ArrowUp] or [ArrowDown] key in readonly mode', async () => { + const elReadOnly = await fixture(html` + + Item 1 + Item 2 + + `); + + elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowDown' })); + expect(elReadOnly.opened).to.be.false; + + elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' })); + expect(elReadOnly.opened).to.be.false; + }); + it('sets inheritsReferenceWidth to min by default', async () => { const el = await fixture(html`