svelte-typeahead 4.2.4 → 4.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.2.4",
+  "version": "4.3.2",
   "license": "MIT",
   "description": "Accessible, fuzzy search typeahead component",
   "author": "Eric Liu (https://github.com/metonym)",
@@ -8,7 +8,6 @@
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./types/index.d.ts",
-  "sideEffects": false,
   "scripts": {
     "dev": "rollup -cw",
     "predeploy": "rollup -c",
@@ -22,7 +21,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^21.0.2",
-    "svelte": "^3.48.0",
+    "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-readme": "^3.6.3"
   },

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,10 +53,11 @@
   let hideDropdown = false;
   let selectedIndex = -1;
   let prevResults = "";
+  let isFocused = false;
 
   afterUpdate(() => {
     if (prevResults !== resultsId && autoselect) {
-      selectedIndex = 0;
+      selectedIndex = getNextNonDisabledIndex();
     }
 
     if (prevResults !== resultsId && !$$slots["no-results"]) {
@@ -85,8 +89,25 @@
     await tick();
 
     if (focusAfterSelect) searchRef.focus();
+    close();
+  }
 
-    hideDropdown = true;
+  /** @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;
   }
 
   /** @type {(direction: -1 | 1) => void} */
@@ -112,6 +133,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 +145,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,12 +187,14 @@
     on:change
     on:focus
     on:focus={() => {
-      hideDropdown = false;
+      open();
+      if (showDropdownOnFocus) {
+        showResults = true;
+        isFocused = true;
+      }
     }}
     on:clear
-    on:clear={() => {
-      hideDropdown = false;
-    }}
+    on:clear={open}
     on:blur
     on:keydown
     on:keydown={(e) => {
@@ -186,8 +215,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