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

@@ -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');

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