From 066f7cfa0881edcd6db814d3f500ff8a7325b600 Mon Sep 17 00:00:00 2001
From: gtyamamoto <guilherme.yamamoto@cortex-intelligence.com>
Date: Thu, 19 Aug 2021 17:21:18 -0300
Subject: [PATCH 1/2] fix: allow ctrl/command + key when the sl-select is on
 focus

---
 src/components/select/select.test.ts | 37 +++++++++++++++++++++++++++-
 src/components/select/select.ts      | 19 ++++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 25adf9ef3..99c229b1b 100644
--- 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,39 @@ 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 ctrlKeyEvent = new KeyboardEvent('keydown', { key: 'Control' });
+    selectBox.dispatchEvent(ctrlKeyEvent);
+    await aTimeout(100);
+    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
+    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
index f546870f4..8f9abea5a 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -65,6 +65,7 @@ export default class SlSelect extends LitElement {
   private helpTextId = `select-help-text-${id}`;
   private labelId = `select-label-${id}`;
   private resizeObserver: ResizeObserver;
+  private isCtrlKeyPressed = false;
 
   @state() private hasFocus = false;
   @state() private hasHelpTextSlot = false;
@@ -249,8 +250,14 @@ export default class SlSelect extends LitElement {
       }
     }
 
-    // All other "printable" keys open the menu and initiate type to select
-    if (!this.isOpen && event.key.length === 1) {
+    // toggling CTRL/Command key state for ctrl + any key commands
+    if (event.key === 'Control' || event.metaKey) {
+      this.isCtrlKeyPressed = true;
+      return;
+    }
+
+    // All other "printable" keys open the menu (if not ctrl key is pressed) and initiate type to select
+    if (!this.isOpen && !this.isCtrlKeyPressed && event.key.length === 1) {
       event.stopPropagation();
       event.preventDefault();
       this.dropdown.show();
@@ -258,6 +265,13 @@ export default class SlSelect extends LitElement {
     }
   }
 
+  handleKeyUp(event: KeyboardEvent) {
+    // toggling CTRL/Command key state for ctrl + any key commands
+    if (event.key === 'Control' || event.metaKey) {
+      this.isCtrlKeyPressed = false;
+    }
+  }
+
   handleLabelClick() {
     const box = this.shadowRoot?.querySelector('.select__box') as HTMLElement;
     box.focus();
@@ -477,6 +491,7 @@ export default class SlSelect extends LitElement {
             @blur=${this.handleBlur}
             @focus=${this.handleFocus}
             @keydown=${this.handleKeyDown}
+            @keyup=${this.handleKeyUp}
           >
             <div class="select__label">
               ${this.displayTags.length

From 767c0b3675e7aea76e50083cbe9c011b4250eedf Mon Sep 17 00:00:00 2001
From: gtyamamoto <guilherme.yamamoto@cortex-intelligence.com>
Date: Fri, 20 Aug 2021 09:20:01 -0300
Subject: [PATCH 2/2] fix: allow ctrl/command + key when the sl-select is on
 focus - doing a more simplistic approach to handle ctrlKey/metaKey values

---
 src/components/select/select.test.ts |  5 +----
 src/components/select/select.ts      | 18 ++++--------------
 2 files changed, 5 insertions(+), 18 deletions(-)

diff --git a/src/components/select/select.test.ts b/src/components/select/select.test.ts
index 99c229b1b..fec7d68c5 100644
--- a/src/components/select/select.test.ts
+++ b/src/components/select/select.test.ts
@@ -48,10 +48,7 @@ describe('<sl-select>', () => {
     `)) as SlSelect;
     const selectBox = el.shadowRoot.querySelector('.select__box') as HTMLSelectElement;
     selectBox.focus();
-    const ctrlKeyEvent = new KeyboardEvent('keydown', { key: 'Control' });
-    selectBox.dispatchEvent(ctrlKeyEvent);
-    await aTimeout(100);
-    const rKeyEvent = new KeyboardEvent('keydown', { key: 'r' });
+    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
index 8f9abea5a..90671601a 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -65,7 +65,6 @@ export default class SlSelect extends LitElement {
   private helpTextId = `select-help-text-${id}`;
   private labelId = `select-label-${id}`;
   private resizeObserver: ResizeObserver;
-  private isCtrlKeyPressed = false;
 
   @state() private hasFocus = false;
   @state() private hasHelpTextSlot = false;
@@ -250,14 +249,13 @@ export default class SlSelect extends LitElement {
       }
     }
 
-    // toggling CTRL/Command key state for ctrl + any key commands
-    if (event.key === 'Control' || event.metaKey) {
-      this.isCtrlKeyPressed = true;
+    // 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 (if not ctrl key is pressed) and initiate type to select
-    if (!this.isOpen && !this.isCtrlKeyPressed && event.key.length === 1) {
+    // All other "printable" keys open the menu and initiate type to select
+    if (!this.isOpen && event.key.length === 1) {
       event.stopPropagation();
       event.preventDefault();
       this.dropdown.show();
@@ -265,13 +263,6 @@ export default class SlSelect extends LitElement {
     }
   }
 
-  handleKeyUp(event: KeyboardEvent) {
-    // toggling CTRL/Command key state for ctrl + any key commands
-    if (event.key === 'Control' || event.metaKey) {
-      this.isCtrlKeyPressed = false;
-    }
-  }
-
   handleLabelClick() {
     const box = this.shadowRoot?.querySelector('.select__box') as HTMLElement;
     box.focus();
@@ -491,7 +482,6 @@ export default class SlSelect extends LitElement {
             @blur=${this.handleBlur}
             @focus=${this.handleFocus}
             @keydown=${this.handleKeyDown}
-            @keyup=${this.handleKeyUp}
           >
             <div class="select__label">
               ${this.displayTags.length