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

ing-bank · Feb 10, 2025 · 8bd3c4c · 8bd3c4c
1 parent 22b8f24
commit 8bd3c4c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 2 deletions.
diff --git a/.changeset/rare-walls-lay.md b/.changeset/rare-walls-lay.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[select-rich] block arrow key interaction when singleOption is set
diff --git a/packages/ui/components/select-rich/src/LionSelectRich.js b/packages/ui/components/select-rich/src/LionSelectRich.js
@@ -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
   __onKeyUp(ev) {
-    if (this.disabled || this.readOnly) {
+    if (this.disabled || this.readOnly || this.singleOption) {
       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
@@ -342,19 +342,31 @@ describe('lion-select-rich', () => {
       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`
         <lion-select-rich readonly>
           <lion-option .choiceValue=${10}>Item 1</lion-option>
           <lion-option .choiceValue=${20} checked>Item 2</lion-option>
         </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' }));
       expect(elReadOnly.opened).to.be.false;
 
       elReadOnly.dispatchEvent(new KeyboardEvent('keyup', { key: 'ArrowUp' }));
       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 () => {