svelte-typeahead 4.2.2 → 4.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -22,8 +22,8 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.2",
-    "svelte": "^3.46.4",
-    "svelte-check": "^2.4.6",
+    "svelte": "^3.49.0",
+    "svelte-check": "^2.8.0",
     "svelte-readme": "^3.6.3"
   },
   "repository": {

package/src/Typeahead.svelte

@@ -33,6 +33,9 @@
   /** Set to `true` to re-focus the input after selecting a result */
   export let focusAfterSelect = false;
 
+  /** Set to `true` to only show results when the input is focused */
+  export let showDropdownOnFocus = false;
+
   /**
    * Specify the maximum number of results to return
    * @type {number}
@@ -50,6 +53,7 @@
   let hideDropdown = false;
   let selectedIndex = -1;
   let prevResults = "";
+  let isFocused = false;
 
   afterUpdate(() => {
     if (prevResults !== resultsId && autoselect) {
@@ -85,14 +89,15 @@
     await tick();
 
     if (focusAfterSelect) searchRef.focus();
-
-    hideDropdown = true;
+    close();
   }
 
   /** @type {(direction: -1 | 1) => void} */
   function change(direction) {
     let index =
-      direction === 1 && 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;
@@ -110,6 +115,9 @@
     selectedIndex = index;
   }
 
+  const open = () => (hideDropdown = false);
+  const close = () => (hideDropdown = true);
+
   $: options = { pre: "<mark>", post: "</mark>", extract };
   $: results = fuzzy
     .filter(value, data, options)
@@ -118,12 +126,16 @@
     .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;
+  $: if (showDropdownOnFocus) {
+    showResults = showResults && isFocused;
+  }
 </script>
 
 <svelte:window
   on:click={({ target }) => {
-    if (!hideDropdown && comboboxRef && !comboboxRef.contains(target)) {
-      hideDropdown = true;
+    if (!hideDropdown && !comboboxRef?.contains(target)) {
+      close();
     }
   }}
 />
@@ -135,7 +147,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
@@ -157,13 +169,15 @@
     on:change
     on:focus
     on:focus={() => {
-      hideDropdown = false;
+      open();
+      isFocused = true;
     }}
     on:clear
-    on:clear={() => {
-      hideDropdown = false;
-    }}
+    on:clear={open}
     on:blur
+    on:blur={() => {
+      isFocused = false;
+    }}
     on:keydown
     on:keydown={(e) => {
       if (results.length === 0) return;
@@ -183,8 +197,8 @@
         case "Escape":
           e.preventDefault();
           value = "";
-          searchRef.focus();
-          hideDropdown = true;
+          searchRef?.focus();
+          close();
           break;
       }
     }}
@@ -195,22 +209,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 +258,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;

package/types/Typeahead.svelte.d.ts

@@ -62,6 +62,12 @@ export interface TypeaheadProps<TItem> extends SearchProps {
    */
   focusAfterSelect?: boolean;
 
+  /**
+   * Set to `true` to only show results when the input is focused
+   * @default false
+   */
+  showDropdownOnFocus?: boolean;
+
   /**
    * Specify the maximum number of results to return
    * @default Infinity