Merge branch 'gtyamamoto-fix/ctrlkeys-usability-sl-select' into next

shoelace-style · Aug 20, 2021 · b7caba8 · b7caba8
2 parents 917dbb1 + 0a45f44
commit b7caba8
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
@@ -1,4 +1,4 @@
-import { expect, fixture, html, waitUntil } from '@open-wc/testing';
+import { expect, fixture, html, waitUntil, aTimeout } from '@open-wc/testing';
 import sinon from 'sinon';
 
 import '../../../dist/shoelace.js';
@@ -21,4 +21,36 @@ describe('<sl-select>', () => {
 
     expect(changeHandler).to.have.been.calledOnce;
   });
+
+  it('should  open the menu when any letter key is pressed with sl-select is on focus', async () => {
+    const el = (await fixture(html`
+      <sl-select>
+        <sl-menu-item value="option-1">Option 1</sl-menu-item>
+        <sl-menu-item value="option-2">Option 2</sl-menu-item>
+        <sl-menu-item value="option-3">Option 3</sl-menu-item>
+      </sl-select>
+    `)) as SlSelect;
+    const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement;
+    selectBox.focus();
+    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
+    selectBox.dispatchEvent(rKeyEvent);
+    await aTimeout(100);
+    expect(selectBox.getAttribute('aria-expanded')).to.equal('true');
+  });
+
+  it('should not open the menu when ctrl + R is pressed with sl-select is on focus', async () => {
+    const el = (await fixture(html`
+      <sl-select>
+        <sl-menu-item value="option-1">Option 1</sl-menu-item>
+        <sl-menu-item value="option-2">Option 2</sl-menu-item>
+        <sl-menu-item value="option-3">Option 3</sl-menu-item>
+      </sl-select>
+    `)) as SlSelect;
+    const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement;
+    selectBox.focus();
+    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r', ctrlKey: true });
+    selectBox.dispatchEvent(rKeyEvent);
+    await aTimeout(100);
+    expect(selectBox.getAttribute('aria-expanded')).to.equal('false');
+  });
 });
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -253,6 +253,11 @@ export default class SlSelect extends LitElement {
       }
     }
 
+    // don't open the menu when a CTRL/Command key is pressed
+    if (event.ctrlKey || event.metaKey) {
+      return;
+    }
+
     // All other "printable" keys open the menu and initiate type to select
     if (!this.isOpen && event.key.length === 1) {
       event.stopPropagation();