fix(select-rich): readonly works with keyboard interaction (#2235)

ing-bank · Apr 3, 2024 · d2edadd · d2edadd
1 parent f6b3f43
commit d2edadd
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 1 deletion.
diff --git a/.changeset/fifty-shrimps-float.md 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
@@ -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
@@ -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`
+        <lion-select-rich readonly>
+          <lion-option .choiceValue=${10}>Item 1</lion-option>
+          <lion-option .choiceValue=${20} checked>Item 2</lion-option>
+        </lion-select-rich>
+      `);
+
+      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`
         <lion-select-rich name="favoriteColor" label="Favorite color">