docs: rework keyboard shortcuts to focus search bar

carbon-design-system · Nov 21, 2023 · 979255d · 979255d
1 parent f630007
commit 979255d
Showing 1 changed file with 8 additions and 21 deletions.
diff --git a/docs/src/pages/_layout.svelte b/docs/src/pages/_layout.svelte
@@ -1,8 +1,3 @@
-<script context="module">
-  // Pressing these keys will focus the search bar.
-  const FOCUS_KEYS = new Set(["/", "Metak"]);
-</script>
-
 <script>
   import {
     isActive,
@@ -47,7 +42,6 @@
   const deprecated = [];
   const new_components = [];
 
-  let keys = "";
   let value = "";
   let active = false;
   $: results = miniSearch.search(value).slice(0, 10);
@@ -72,25 +66,18 @@
 
 <svelte:body
   on:keydown="{(e) => {
-    keys += e.key;
-  }}"
-  on:keyup="{(e) => {
     if (active) return;
-
-    if (FOCUS_KEYS.has(keys)) {
-      if (
-        document.activeElement instanceof HTMLInputElement ||
-        document.activeElement instanceof HTMLTextAreaElement
-      ) {
-        // Exit early if an inputtable element is already focused.
-        return;
-      }
-
+    if (
+      document.activeElement instanceof HTMLInputElement ||
+      document.activeElement instanceof HTMLTextAreaElement
+    ) {
+      // Exit early if an inputtable element is already focused.
+      return;
+    }
+    if ((e.metaKey && e.key === 'k') || e.key === '/') {
       e.preventDefault();
       active = true;
     }
-
-    keys = '';
   }}" />
 
 <Theme persist bind:theme="{$theme}">