svelte-typeahead 4.2.4 → 4.3.0

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,8 +89,7 @@
     await tick();
 
     if (focusAfterSelect) searchRef.focus();
-
-    hideDropdown = true;
+    close();
   }
 
   /** @type {(direction: -1 | 1) => void} */
@@ -112,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)
@@ -121,12 +127,15 @@
     .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();
     }
   }}
 />
@@ -160,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;
@@ -186,8 +197,8 @@
         case "Escape":
           e.preventDefault();
           value = "";
-          searchRef.focus();
-          hideDropdown = true;
+          searchRef?.focus();
+          close();
           break;
       }
     }}

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