Make search predictable

bluwy · Nov 4, 2022 · a91a3ce · a91a3ce
1 parent 4b4f599
commit a91a3ce
Showing 1 changed file with 13 additions and 3 deletions.
diff --git a/site/src/components/NpmSearchInput.svelte b/site/src/components/NpmSearchInput.svelte
@@ -73,17 +73,20 @@
     }
   }
 
-  const handleInput = debounce(async () => {
+  const search = debounce(async () => {
     arrowSelectIndex = -1
+    options = []
 
     if (!npmPkgName) return
 
+    const search = npmPkgName
     const result = await fetch(
       // prettier-ignore
       `${import.meta.env.VITE_NPM_REGISTRY}/-/v1/search?text=${encodeURIComponent(npmPkgName)}&size=5&quality=0.0&popularity=1.0&maintenance=0.0`
     )
 
-    if (result.ok) {
+    // `npmPkgName` may have changed when the user types more stuff
+    if (result.ok && search === npmPkgName) {
       const json = await result.json()
       options = json.objects.map((v) => ({
         value: v.package.name,
@@ -93,6 +96,13 @@
     }
   }, 500)
 
+  function handleInput() {
+    // clear selection and reset option so we don't auto select while typing
+    arrowSelectIndex = -1
+    options = []
+    search()
+  }
+
   function handleSubmit() {
     if (!npmPkgName) return
     const npmPkgVersion = options.find((o) => o.value === npmPkgName)?.version
@@ -143,7 +153,7 @@
       >
         {#each options as opt, i}
           <li
-            class="m-0 py-0 bg-gray bg-opacity-0 hover:bg-opacity-25 transition-colors sele"
+            class="m-0 py-0 bg-gray bg-opacity-0 hover:bg-opacity-25 transition-colors"
             class:bg-opacity-25={arrowSelectIndex === i}
             aria-selected={arrowSelectIndex === i}
           >