From 920cb59cce89016b3f0611698c67754f7024c0ee Mon Sep 17 00:00:00 2001
From: Guilherme Franco <108012699+9uifranco@users.noreply.github.com>
Date: Mon, 9 Jan 2023 09:53:08 -0300
Subject: [PATCH] Fixes #1487 - Autofocus search modal input

This commit addresses issue #1487 by adding a proper autofocus on algolia-search modal. This focus on the input field when user types something for the first time.
Pull requests ##1418 add autofocus on search input, but that doesn't seem to be working. Also, this solution produced a warning "Avoid using autofocus".
Pull request #1442 also resolves this issue but uses setTimeout to autofocus.
---
 app/components/search/algolia-search.svelte | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/app/components/search/algolia-search.svelte b/app/components/search/algolia-search.svelte
index f7cfdcad2..a4735fb6f 100644
--- a/app/components/search/algolia-search.svelte
+++ b/app/components/search/algolia-search.svelte
@@ -14,6 +14,9 @@
   let results: any;
   let hits = [];
   let activeHit = 0;
+  let input: any;
+  let hasTypedOnce: boolean;
+  
   onMount(() => {
     return () => {
       window.removeEventListener('keydown', handleSpecialKeys);
@@ -46,6 +49,7 @@
     }
   }
   function handleSpecialKeys(e: KeyboardEvent) {
+    
     if (e.key === 'ArrowUp') {
       goUp();
     }
@@ -56,18 +60,27 @@
       selectHit();
     }
   }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if(!hasTypedOnce) {
+      input.focus();
+      hasTypedOnce = true;
+    }
+    handleSpecialKeys(e)
+  }
+
 </script>
 
-<svelte:window on:keydown={handleSpecialKeys} />
+<svelte:window on:keydown={handleKeyDown} />
 
 <modal-dialog name="search">
   <form>
     {#if $modal === 'search'}
       <input
+        bind:this={input}
         class="input"
         name="search"
         type="text"
-        autofocus
         placeholder="Search"
         on:input={search}
       />