update typeToSelect arg

docs/resources/changelog.md

@@ -9,6 +9,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - 🚨 BREAKING: removed `checked-icon` part from `<sl-menu-item>` in preparation for parts refactor
+- 🚨 BREAKING: changed the `typeToSelect()` method's argument from `String` to `KeyboardEvent` in `<sl-menu>` to support more advanced key combinations
 - Added `form`, `formaction`, `formmethod`, `formnovalidate`, and `formtarget` attributes to `<sl-button>` [#699](https://github.com/shoelace-style/shoelace/issues/699)
 - Added Prettier and ESLint to markdown files
 - Added background color and border to `<sl-menu>`

src/components/dropdown/dropdown.ts

@@ -255,7 +255,7 @@ export default class SlDropdown extends LitElement {
     // Other keys bring focus to the menu and initiate type-to-select behavior
     const ignoredKeys = ['Tab', 'Shift', 'Meta', 'Ctrl', 'Alt'];
     if (this.open && !ignoredKeys.includes(event.key)) {
-      menu.typeToSelect(event.key);
+      menu.typeToSelect(event);
     }
   }
 

src/components/menu/menu.ts

@@ -71,19 +71,23 @@ export default class SlMenu extends LitElement {
 
   /**
    * Initiates type-to-select logic, which automatically selects an option based on what the user is currently typing.
-   * The key passed will be appended to the internal query and the selection will be updated. After a brief period, the
-   * internal query is cleared automatically. This method is intended to be used with the keydown event. Useful for
-   * enabling type-to-select when the menu doesn't have focus.
+   * The event passed will be used to append the appropriate characters to the internal query and the selection will be
+   * updated. After a brief period, the internal query is cleared automatically. This is useful for enabling
+   * type-to-select behavior when the menu doesn't have focus.
    */
-  typeToSelect(key: string) {
+  typeToSelect(event: KeyboardEvent) {
     const items = this.getAllItems({ includeDisabled: false });
     clearTimeout(this.typeToSelectTimeout);
     this.typeToSelectTimeout = window.setTimeout(() => (this.typeToSelectString = ''), 1000);
 
-    if (key === 'Backspace') {
-      this.typeToSelectString = this.typeToSelectString.slice(0, -1);
+    if (event.key === 'Backspace') {
+      if (event.metaKey || event.ctrlKey) {
+        this.typeToSelectString = '';
+      } else {
+        this.typeToSelectString = this.typeToSelectString.slice(0, -1);
+      }
     } else {
-      this.typeToSelectString += key.toLowerCase();
+      this.typeToSelectString += event.key.toLowerCase();
     }
 
     // Restore focus in browsers that don't support :focus-visible when using the keyboard
@@ -171,7 +175,7 @@ export default class SlMenu extends LitElement {
       }
     }
 
-    this.typeToSelect(event.key);
+    this.typeToSelect(event);
   }
 
   handleMouseDown(event: MouseEvent) {

src/components/select/select.ts

@@ -283,7 +283,7 @@ export default class SlSelect extends LitElement {
       event.stopPropagation();
       event.preventDefault();
       this.dropdown.show();
-      this.menu.typeToSelect(event.key);
+      this.menu.typeToSelect(event);
     }
   }