svelte-typeahead 5.0.1 → 5.0.3

package/README.md

@@ -97,8 +97,8 @@ Use the default slot to render custom results.
 Use the "no-results" slot to render a message if the search value does not yield results.
 
 ```svelte
-<Typeahead value="abcd" {data} {extract} let:value>
-  <svelte:fragment slot="no-results">
+<Typeahead value="abcd" {data} {extract}>
+  <svelte:fragment slot="no-results" let:value>
     No results found for "{value}"
   </svelte:fragment>
 </Typeahead>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",

package/src/Typeahead.svelte

@@ -73,7 +73,7 @@
   async function select() {
     const result = results[selectedIndex];
 
-    if (result.disabled) return;
+    if (!result || result.disabled) return;
 
     const selectedValue = extract(result.original);
     const searchedValue = value;
@@ -97,46 +97,35 @@
 
   /** @type {() => number} */
   function getNextNonDisabledIndex() {
-    let index = 0;
-    let disabled = results[index]?.disabled ?? false;
-
-    while (disabled) {
-      if (index === results.length) {
-        index = 0;
-      } else {
-        index += 1;
-      }
-
-      disabled = results[index]?.disabled ?? false;
-    }
-
-    return index;
+    return results.findIndex((result) => !result.disabled);
   }
 
   /** @type {(direction: -1 | 1) => void} */
   function change(direction) {
-    let index =
-      direction === 1 && selectedIndex === results.length - 1
-        ? 0
-        : selectedIndex + direction;
-    if (index < 0) index = results.length - 1;
-
-    let disabled = results[index].disabled;
-
-    while (disabled) {
-      if (index === results.length) {
-        index = 0;
-      } else {
-        index += direction;
-      }
+    const startingIndex = selectedIndex === -1 && direction === -1 ? 0 : selectedIndex;
+
+    for (let step = 1; step <= results.length; step += 1) {
+      const index = (startingIndex + step * direction + results.length) % results.length;
 
-      disabled = results[index].disabled;
+      if (!results[index].disabled) {
+        selectedIndex = index;
+        return;
+      }
     }
 
-    selectedIndex = index;
+    selectedIndex = -1;
   }
 
-  const open = () => (hideDropdown = false);
+  const open = () => {
+    hideDropdown = false;
+    // Reset selected index when reopening menu
+    if (autoselect && results.length > 0) {
+      selectedIndex = getNextNonDisabledIndex();
+    } else {
+      selectedIndex = -1;
+    }
+  };
+  
   const close = () => {
     hideDropdown = true;
     isFocused = false;
@@ -212,7 +201,15 @@
     }}
     on:clear
     on:clear={open}
-    on:blur
+    on:blur={(e) => {
+      // Check if focus is moving to an element within the combobox
+      const relatedTarget = e.relatedTarget;
+      if (relatedTarget && comboboxRef?.contains(relatedTarget)) {
+        return;
+      }
+      // Close immediately for keyboard navigation (Tab, Shift+Tab)
+      close();
+    }}
     on:keydown
     on:keydown={(e) => {
       if (results.length === 0) return;
@@ -253,8 +250,9 @@
           class:selected={selectedIndex === index}
           class:disabled={result.disabled}
           aria-selected={selectedIndex === index}
-          on:click={() => {
+          on:mousedown={(e) => {
             if (result.disabled) return;
+            e.preventDefault(); // Prevent input from losing focus
             selectedIndex = index;
             select();
           }}
@@ -283,11 +281,12 @@
     background-color: #fff;
   }
 
-  ul {
+  [data-svelte-typeahead] ul {
     position: absolute;
     top: 100%;
     left: 0;
     width: 100%;
+    max-width: none;
     margin: 0;
     padding: 0;
     list-style: none;