svelte-typeahead 4.2.1 → 4.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -21,10 +21,10 @@
     "svelte-search": "^1.1.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^21.0.1",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.2.6",
-    "svelte-readme": "^3.4.1"
+    "@rollup/plugin-commonjs": "^21.0.2",
+    "svelte": "^3.48.0",
+    "svelte-check": "^2.8.0",
+    "svelte-readme": "^3.6.3"
   },
   "repository": {
     "type": "git",

package/src/Typeahead.svelte

@@ -92,7 +92,9 @@
   /** @type {(direction: -1 | 1) => void} */
   function change(direction) {
     let index =
-      selectedIndex === results.length - 1 ? 0 : selectedIndex + direction;
+      direction === 1 && selectedIndex === results.length - 1
+        ? 0
+        : selectedIndex + direction;
     if (index < 0) index = results.length - 1;
 
     let disabled = results[index].disabled;
@@ -118,6 +120,7 @@
     .filter((result) => !filter(result.original))
     .map((result) => ({ ...result, disabled: disable(result.original) }));
   $: resultsId = results.map((result) => extract(result.original)).join("");
+  $: showResults = !hideDropdown && results.length > 0;
 </script>
 
 <svelte:window
@@ -135,7 +138,7 @@
   aria-haspopup="listbox"
   aria-owns="{id}-listbox"
   class:dropdown={results.length > 0}
-  aria-expanded={!hideDropdown && results.length > 0}
+  aria-expanded={showResults}
   id="{id}-typeahead"
 >
   <Search
@@ -195,22 +198,25 @@
     aria-labelledby="{id}-label"
     id="{id}-listbox"
   >
-    {#if !hideDropdown && results.length > 0}
-      {#each results as result, i}
+    {#if showResults}
+      {#each results as result, index}
         <li
           role="option"
-          id="{id}-result-{i}"
-          class:selected={selectedIndex === i}
+          id="{id}-result-{index}"
+          class:selected={selectedIndex === index}
           class:disabled={result.disabled}
-          aria-selected={selectedIndex === i}
+          aria-selected={selectedIndex === index}
           on:click={() => {
-            if (!result.disabled) {
-              selectedIndex = i;
-              select();
-            }
+            if (result.disabled) return;
+            selectedIndex = index;
+            select();
+          }}
+          on:mouseenter={() => {
+            if (result.disabled) return;
+            selectedIndex = index;
           }}
         >
-          <slot {result} index={i} {value}>
+          <slot {result} {index} {value}>
             {@html result.string}
           </slot>
         </li>
@@ -241,6 +247,10 @@
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
   }
 
+  [aria-expanded="true"] ul {
+    z-index: 1;
+  }
+
   li,
   .no-results {
     padding: 0.25rem 1rem;