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`