Add Shortcut "/" for search, don't auto focus

src/components/Search.astro

@@ -1,4 +1,6 @@
 ---
+import KeyboardControls from 'astro-keyboard-controls';
+
 export interface Props {
   readonly id?: string;
   readonly className?: string;
@@ -9,6 +11,8 @@ export interface Props {
 const { id, className, query, uiOptions = {} } = Astro.props;
 const bundlePath = `${import.meta.env.BASE_URL}pagefind/`;
 ---
+<KeyboardControls selector=".pagefind-ui__search-input" key="/" />
+
 
 <button class="mobile-s" onclick="MobileCloseSearch()" id="search-close">Close</button>
 
@@ -32,6 +36,24 @@ function MobileCloseSearch() {
   data-ui-options={JSON.stringify(uiOptions)}
 >
 </div>
+<span id="key">/</span>
+<style lang="scss">
+#key {
+  display: block;
+  background: #222;
+  aspect-ratio: 1;
+  padding: 4px 10px;
+  border-radius: 6px;
+  font-size: 14px;
+  margin-left: -42px;
+  pointer-events: none;
+  opacity: 0.5;
+}
+@media screen and (max-width: 775px) {
+ #key {display: none}
+}
+</style>
+
 <script>
   // @ts-ignore
   import { PagefindUI } from "@pagefind/default-ui";
@@ -65,8 +87,6 @@ function MobileCloseSearch() {
 
       const input = el.querySelector<HTMLInputElement>(`input[type="text"]`);
 
-      input?.focus();
-
       if (input) {
         input.value = query;
         input.dispatchEvent(new Event("input", { bubbles: true }));