svelte-typeahead 4.3.0 → 4.3.1

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [4.3.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.1) - 2022-08-29
+
+**Fixes**
+
+- skip disabled results when auto-selecting a result
+
 ## [4.3.0](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.0) - 2022-08-29
 
 **Features**

package/README.md

@@ -153,20 +153,20 @@ Set `showDropdownOnFocus` to `true` to only show the dropdown when the search in
 
 ### Props
 
-| Prop name          | Value                                                                      | Description                                                                                                                           |
-| :----------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
-| value              | `string` (default: `""`)                                                   | Input search value                                                                                                                    |
-| data               | `TItem[]` (default: `[]`)                                                  | Items to search                                                                                                                       |
-| extract            | `(TItem) => any`                                                           | Target an item key if `data` is an object array                                                                                       |
-| disable            | `(TItem) => boolean`                                                       | Pass in a function to disable items. They can be displayed in the results but will not be selectable.                                 |
-| filter             | `(TItem) => boolean`                                                       | Pass in a function to filter items. They will be hidden and are not displayed in the results.                                         |
-| autoselect         | `boolean` (default: `true`)                                                | Automatically select the first (top) result                                                                                           |
-| inputAfterSelect   | `"update" or "clear" or "keep"`(default: `"update"`)                       | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
-| results            | `FuzzyResult[]` (default: `[]`)                                            | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module                                                          |
-| focusAfterSelect   | `boolean` (default: `false`)                                               | Set to `true` to re-focus the input after selecting a result.                                                                         |
+| Prop name           | Value                                                                      | Description                                                                                                                           |
+| :------------------ | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
+| value               | `string` (default: `""`)                                                   | Input search value                                                                                                                    |
+| data                | `TItem[]` (default: `[]`)                                                  | Items to search                                                                                                                       |
+| extract             | `(TItem) => any`                                                           | Target an item key if `data` is an object array                                                                                       |
+| disable             | `(TItem) => boolean`                                                       | Pass in a function to disable items. They can be displayed in the results but will not be selectable.                                 |
+| filter              | `(TItem) => boolean`                                                       | Pass in a function to filter items. They will be hidden and are not displayed in the results.                                         |
+| autoselect          | `boolean` (default: `true`)                                                | Automatically select the first (top) result                                                                                           |
+| inputAfterSelect    | `"update" or "clear" or "keep"`(default: `"update"`)                       | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
+| results             | `FuzzyResult[]` (default: `[]`)                                            | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module                                                          |
+| focusAfterSelect    | `boolean` (default: `false`)                                               | Set to `true` to re-focus the input after selecting a result.                                                                         |
 | showDropdownOnFocus | `boolean` (default: `false`)                                               | Set to `true` to only show results when the input is focused.                                                                         |
-| limit              | `number` (default: `Infinity`)                                             | Specify the maximum number of results to display.                                                                                     |
-| `...$$restProps`   | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element.                                                                                   |
+| limit               | `number` (default: `Infinity`)                                             | Specify the maximum number of results to display.                                                                                     |
+| `...$$restProps`    | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element.                                                                                   |
 
 ### Dispatched events
 

package/lib/index.js

@@ -1084,14 +1084,14 @@
 
     const get_no_results_slot_context = ctx => ({
     	value: /*value*/ ctx[0],
-    	result: /*result*/ ctx[46],
-    	index: /*index*/ ctx[48]
+    	result: /*result*/ ctx[47],
+    	index: /*index*/ ctx[49]
     });
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[46] = list[i];
-    	child_ctx[48] = i;
+    	child_ctx[47] = list[i];
+    	child_ctx[49] = i;
     	return child_ctx;
     }
 
@@ -1101,12 +1101,12 @@
     });
 
     const get_default_slot_context = ctx => ({
-    	result: /*result*/ ctx[46],
-    	index: /*index*/ ctx[48],
+    	result: /*result*/ ctx[47],
+    	index: /*index*/ ctx[49],
     	value: /*value*/ ctx[0]
     });
 
-    // (212:4) {#if showResults}
+    // (230:4) {#if showResults}
     function create_if_block_1(ctx) {
     	let each_1_anchor;
     	let current;
@@ -1190,10 +1190,10 @@
     	};
     }
 
-    // (230:41)              
+    // (248:41)              
     function fallback_block(ctx) {
     	let html_tag;
-    	let raw_value = /*result*/ ctx[46].string + "";
+    	let raw_value = /*result*/ ctx[47].string + "";
     	let html_anchor;
 
     	return {
@@ -1207,7 +1207,7 @@
     			insert(target, html_anchor, anchor);
     		},
     		p(ctx, dirty) {
-    			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[46].string + "")) html_tag.p(raw_value);
+    			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[47].string + "")) html_tag.p(raw_value);
     		},
     		d(detaching) {
     			if (detaching) detach(html_anchor);
@@ -1216,7 +1216,7 @@
     	};
     }
 
-    // (213:6) {#each results as result, index}
+    // (231:6) {#each results as result, index}
     function create_each_block(ctx) {
     	let li;
     	let t;
@@ -1230,11 +1230,11 @@
     	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
     	function click_handler_1() {
-    		return /*click_handler_1*/ ctx[40](/*result*/ ctx[46], /*index*/ ctx[48]);
+    		return /*click_handler_1*/ ctx[40](/*result*/ ctx[47], /*index*/ ctx[49]);
     	}
 
     	function mouseenter_handler() {
-    		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[46], /*index*/ ctx[48]);
+    		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[47], /*index*/ ctx[49]);
     	}
 
     	return {
@@ -1243,11 +1243,11 @@
     			if (default_slot_or_fallback) default_slot_or_fallback.c();
     			t = space();
     			attr(li, "role", "option");
-    			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]));
-    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
+    			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[49]));
+    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
     			attr(li, "class", "svelte-9wywte");
-    			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
-    			toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
+    			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
+    			toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
     		},
     		m(target, anchor) {
     			insert(target, li, anchor);
@@ -1290,20 +1290,20 @@
     				}
     			}
 
-    			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]))) {
+    			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[49]))) {
     				attr(li, "id", li_id_value);
     			}
 
-    			if (!current || dirty[0] & /*selectedIndex*/ 256 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[48])) {
+    			if (!current || dirty[0] & /*selectedIndex*/ 256 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[49])) {
     				attr(li, "aria-selected", li_aria_selected_value);
     			}
 
     			if (dirty[0] & /*selectedIndex*/ 256) {
-    				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
+    				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
     			}
 
     			if (dirty[0] & /*results*/ 2) {
-    				toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
+    				toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
     			}
     		},
     		i(local) {
@@ -1324,7 +1324,7 @@
     	};
     }
 
-    // (236:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+    // (254:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
     function create_if_block(ctx) {
     	let div;
     	let current;
@@ -1655,7 +1655,7 @@
 
     	afterUpdate(() => {
     		if (prevResults !== resultsId && autoselect) {
-    			$$invalidate(8, selectedIndex = 0);
+    			$$invalidate(8, selectedIndex = getNextNonDisabledIndex());
     		}
 
     		if (prevResults !== resultsId && !$$slots["no-results"]) {
@@ -1686,6 +1686,24 @@
     		close();
     	}
 
+    	/** @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} */
     	function change(direction) {
     		let index = direction === 1 && selectedIndex === results.length - 1
@@ -1928,9 +1946,7 @@
     	}
     }
 
-    var Typeahead$1 = Typeahead;
-
-    exports["default"] = Typeahead$1;
+    exports["default"] = Typeahead;
 
     Object.defineProperty(exports, '__esModule', { value: true });
 

package/lib/index.mjs

@@ -1078,14 +1078,14 @@ const get_no_results_slot_changes = dirty => ({
 
 const get_no_results_slot_context = ctx => ({
 	value: /*value*/ ctx[0],
-	result: /*result*/ ctx[46],
-	index: /*index*/ ctx[48]
+	result: /*result*/ ctx[47],
+	index: /*index*/ ctx[49]
 });
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[46] = list[i];
-	child_ctx[48] = i;
+	child_ctx[47] = list[i];
+	child_ctx[49] = i;
 	return child_ctx;
 }
 
@@ -1095,12 +1095,12 @@ const get_default_slot_changes = dirty => ({
 });
 
 const get_default_slot_context = ctx => ({
-	result: /*result*/ ctx[46],
-	index: /*index*/ ctx[48],
+	result: /*result*/ ctx[47],
+	index: /*index*/ ctx[49],
 	value: /*value*/ ctx[0]
 });
 
-// (212:4) {#if showResults}
+// (230:4) {#if showResults}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -1184,10 +1184,10 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (230:41)              
+// (248:41)              
 function fallback_block(ctx) {
 	let html_tag;
-	let raw_value = /*result*/ ctx[46].string + "";
+	let raw_value = /*result*/ ctx[47].string + "";
 	let html_anchor;
 
 	return {
@@ -1201,7 +1201,7 @@ function fallback_block(ctx) {
 			insert(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[46].string + "")) html_tag.p(raw_value);
+			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[47].string + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -1210,7 +1210,7 @@ function fallback_block(ctx) {
 	};
 }
 
-// (213:6) {#each results as result, index}
+// (231:6) {#each results as result, index}
 function create_each_block(ctx) {
 	let li;
 	let t;
@@ -1224,11 +1224,11 @@ function create_each_block(ctx) {
 	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
 	function click_handler_1() {
-		return /*click_handler_1*/ ctx[40](/*result*/ ctx[46], /*index*/ ctx[48]);
+		return /*click_handler_1*/ ctx[40](/*result*/ ctx[47], /*index*/ ctx[49]);
 	}
 
 	function mouseenter_handler() {
-		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[46], /*index*/ ctx[48]);
+		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[47], /*index*/ ctx[49]);
 	}
 
 	return {
@@ -1237,11 +1237,11 @@ function create_each_block(ctx) {
 			if (default_slot_or_fallback) default_slot_or_fallback.c();
 			t = space();
 			attr(li, "role", "option");
-			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]));
-			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
+			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[49]));
+			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
 			attr(li, "class", "svelte-9wywte");
-			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
-			toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
+			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
+			toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
@@ -1284,20 +1284,20 @@ function create_each_block(ctx) {
 				}
 			}
 
-			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]))) {
+			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[49]))) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (!current || dirty[0] & /*selectedIndex*/ 256 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[48])) {
+			if (!current || dirty[0] & /*selectedIndex*/ 256 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[49])) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
 			if (dirty[0] & /*selectedIndex*/ 256) {
-				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
+				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
 			}
 
 			if (dirty[0] & /*results*/ 2) {
-				toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
+				toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
 			}
 		},
 		i(local) {
@@ -1318,7 +1318,7 @@ function create_each_block(ctx) {
 	};
 }
 
-// (236:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+// (254:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
 function create_if_block(ctx) {
 	let div;
 	let current;
@@ -1649,7 +1649,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	afterUpdate(() => {
 		if (prevResults !== resultsId && autoselect) {
-			$$invalidate(8, selectedIndex = 0);
+			$$invalidate(8, selectedIndex = getNextNonDisabledIndex());
 		}
 
 		if (prevResults !== resultsId && !$$slots["no-results"]) {
@@ -1680,6 +1680,24 @@ function instance($$self, $$props, $$invalidate) {
 		close();
 	}
 
+	/** @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} */
 	function change(direction) {
 		let index = direction === 1 && selectedIndex === results.length - 1
@@ -1922,6 +1940,4 @@ class Typeahead extends SvelteComponent {
 	}
 }
 
-var Typeahead$1 = Typeahead;
-
-export { Typeahead$1 as default };
+export { Typeahead as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-typeahead",
-  "version": "4.3.0",
+  "version": "4.3.1",
   "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",

package/src/Typeahead.svelte

@@ -57,7 +57,7 @@
 
   afterUpdate(() => {
     if (prevResults !== resultsId && autoselect) {
-      selectedIndex = 0;
+      selectedIndex = getNextNonDisabledIndex();
     }
 
     if (prevResults !== resultsId && !$$slots["no-results"]) {
@@ -92,6 +92,24 @@
     close();
   }
 
+  /** @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} */
   function change(direction) {
     let index =