svelte-typeahead 4.3.1 → 4.3.2

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.2](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.2) - 2022-09-01
+
+**Fixes**
+
+- allow results to be selected if using `showDropdownOnFocus`
+
 ## [4.3.1](https://github.com/metonym/svelte-typeahead/releases/tag/v4.3.1) - 2022-08-29
 
 **Fixes**

package/README.md

@@ -83,6 +83,26 @@ Pass an array of objects to the `data` prop. Use the `extractor` prop to specify
 <Typeahead {data} {extract} />
 ```
 
+### Custom label
+
+`$$restProps` are forwarded to [svelte-search](https://github.com/metonym/svelte-search).
+
+Use the `label` prop to specify a custom label.
+
+```svelte
+<Typeahead label="U.S. States" {data} {extract} />
+```
+
+### Hidden label
+
+Set `hideLabel` to `true` to visually hide the label.
+
+It's recommended that you set the `label` – even if hidden – for accessibility.
+
+```svelte
+<Typeahead label="U.S. States" hideLabel {data} {extract} />
+```
+
 ### Custom-styled results
 
 This component uses the [fuzzy](https://github.com/mattyork/fuzzy) library to highlight matching characters with the [mark](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark) element.

package/lib/index.js

@@ -1084,14 +1084,14 @@
 
     const get_no_results_slot_context = ctx => ({
     	value: /*value*/ ctx[0],
-    	result: /*result*/ ctx[47],
-    	index: /*index*/ ctx[49]
+    	result: /*result*/ ctx[46],
+    	index: /*index*/ ctx[48]
     });
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[47] = list[i];
-    	child_ctx[49] = i;
+    	child_ctx[46] = list[i];
+    	child_ctx[48] = i;
     	return child_ctx;
     }
 
@@ -1101,8 +1101,8 @@
     });
 
     const get_default_slot_context = ctx => ({
-    	result: /*result*/ ctx[47],
-    	index: /*index*/ ctx[49],
+    	result: /*result*/ ctx[46],
+    	index: /*index*/ ctx[48],
     	value: /*value*/ ctx[0]
     });
 
@@ -1138,7 +1138,7 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 33555207) {
+    			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 33555975) {
     				each_value = /*results*/ ctx[1];
     				let i;
 
@@ -1193,7 +1193,7 @@
     // (248:41)              
     function fallback_block(ctx) {
     	let html_tag;
-    	let raw_value = /*result*/ ctx[47].string + "";
+    	let raw_value = /*result*/ ctx[46].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[47].string + "")) html_tag.p(raw_value);
+    			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[46].string + "")) html_tag.p(raw_value);
     		},
     		d(detaching) {
     			if (detaching) detach(html_anchor);
@@ -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[47], /*index*/ ctx[49]);
+    		return /*click_handler_1*/ ctx[39](/*result*/ ctx[46], /*index*/ ctx[48]);
     	}
 
     	function mouseenter_handler() {
-    		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[47], /*index*/ ctx[49]);
+    		return /*mouseenter_handler*/ ctx[40](/*result*/ ctx[46], /*index*/ ctx[48]);
     	}
 
     	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[49]));
-    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
+    			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]));
+    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[9] === /*index*/ ctx[48]);
     			attr(li, "class", "svelte-9wywte");
-    			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
-    			toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
+    			toggle_class(li, "selected", /*selectedIndex*/ ctx[9] === /*index*/ ctx[48]);
+    			toggle_class(li, "disabled", /*result*/ ctx[46].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[49]))) {
+    			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]))) {
     				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[49])) {
+    			if (!current || dirty[0] & /*selectedIndex*/ 512 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[9] === /*index*/ ctx[48])) {
     				attr(li, "aria-selected", li_aria_selected_value);
     			}
 
-    			if (dirty[0] & /*selectedIndex*/ 256) {
-    				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
+    			if (dirty[0] & /*selectedIndex*/ 512) {
+    				toggle_class(li, "selected", /*selectedIndex*/ ctx[9] === /*index*/ ctx[48]);
     			}
 
     			if (dirty[0] & /*results*/ 2) {
-    				toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
+    				toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
     			}
     		},
     		i(local) {
@@ -1398,7 +1398,7 @@
     	const search_spread_levels = [
     		{ id: /*id*/ ctx[2] },
     		{ removeFormAriaAttributes: true },
-    		/*$$restProps*/ ctx[14],
+    		/*$$restProps*/ ctx[15],
     		{ "aria-autocomplete": "list" },
     		{
     			"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1407,8 +1407,8 @@
     			"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
     		},
     		{
-    			"aria-activedescendant": /*selectedIndex*/ ctx[8] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
-    			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[8]}`
+    			"aria-activedescendant": /*selectedIndex*/ ctx[9] >= 0 && !/*hideDropdown*/ ctx[4] && /*results*/ ctx[1].length > 0
+    			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[9]}`
     			: null
     		}
     	];
@@ -1427,8 +1427,8 @@
     		search_props = assign(search_props, search_spread_levels[i]);
     	}
 
-    	if (/*searchRef*/ ctx[7] !== void 0) {
-    		search_props.ref = /*searchRef*/ ctx[7];
+    	if (/*searchRef*/ ctx[8] !== void 0) {
+    		search_props.ref = /*searchRef*/ ctx[8];
     	}
 
     	if (/*value*/ ctx[0] !== void 0) {
@@ -1444,13 +1444,12 @@
     	search.$on("focus", /*focus_handler*/ ctx[33]);
     	search.$on("focus", /*focus_handler_1*/ ctx[34]);
     	search.$on("clear", /*clear_handler*/ ctx[35]);
-    	search.$on("clear", /*open*/ ctx[11]);
+    	search.$on("clear", /*open*/ ctx[12]);
     	search.$on("blur", /*blur_handler*/ ctx[36]);
-    	search.$on("blur", /*blur_handler_1*/ ctx[37]);
-    	search.$on("keydown", /*keydown_handler*/ ctx[38]);
-    	search.$on("keydown", /*keydown_handler_1*/ ctx[39]);
-    	let if_block0 = /*showResults*/ ctx[5] && create_if_block_1(ctx);
-    	let if_block1 = /*$$slots*/ ctx[13]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
+    	search.$on("keydown", /*keydown_handler*/ ctx[37]);
+    	search.$on("keydown", /*keydown_handler_1*/ ctx[38]);
+    	let if_block0 = /*showResults*/ ctx[6] && create_if_block_1(ctx);
+    	let if_block1 = /*$$slots*/ ctx[14]["no-results"] && !/*hideDropdown*/ ctx[4] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
 
     	return {
     		c() {
@@ -1470,7 +1469,7 @@
     			attr(div, "role", "combobox");
     			attr(div, "aria-haspopup", "listbox");
     			attr(div, "aria-owns", div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"));
-    			attr(div, "aria-expanded", /*showResults*/ ctx[5]);
+    			attr(div, "aria-expanded", /*showResults*/ ctx[6]);
     			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
     			attr(div, "class", "svelte-9wywte");
     			toggle_class(div, "dropdown", /*results*/ ctx[1].length > 0);
@@ -1483,7 +1482,7 @@
     			if (if_block0) if_block0.m(ul, null);
     			append(ul, t1);
     			if (if_block1) if_block1.m(ul, null);
-    			/*div_binding*/ ctx[42](div);
+    			/*div_binding*/ ctx[41](div);
     			current = true;
 
     			if (!mounted) {
@@ -1492,11 +1491,11 @@
     			}
     		},
     		p(ctx, dirty) {
-    			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 16654)
+    			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 33302)
     			? get_spread_update(search_spread_levels, [
     					dirty[0] & /*id*/ 4 && { id: /*id*/ ctx[2] },
     					search_spread_levels[1],
-    					dirty[0] & /*$$restProps*/ 16384 && get_spread_object(/*$$restProps*/ ctx[14]),
+    					dirty[0] & /*$$restProps*/ 32768 && get_spread_object(/*$$restProps*/ ctx[15]),
     					search_spread_levels[3],
     					dirty[0] & /*id*/ 4 && {
     						"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1504,17 +1503,17 @@
     					dirty[0] & /*id*/ 4 && {
     						"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
     					},
-    					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 270 && {
-    						"aria-activedescendant": /*selectedIndex*/ ctx[8] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
-    						? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[8]}`
+    					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 534 && {
+    						"aria-activedescendant": /*selectedIndex*/ ctx[9] >= 0 && !/*hideDropdown*/ ctx[4] && /*results*/ ctx[1].length > 0
+    						? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[9]}`
     						: null
     					}
     				])
     			: {};
 
-    			if (!updating_ref && dirty[0] & /*searchRef*/ 128) {
+    			if (!updating_ref && dirty[0] & /*searchRef*/ 256) {
     				updating_ref = true;
-    				search_changes.ref = /*searchRef*/ ctx[7];
+    				search_changes.ref = /*searchRef*/ ctx[8];
     				add_flush_callback(() => updating_ref = false);
     			}
 
@@ -1526,11 +1525,11 @@
 
     			search.$set(search_changes);
 
-    			if (/*showResults*/ ctx[5]) {
+    			if (/*showResults*/ ctx[6]) {
     				if (if_block0) {
     					if_block0.p(ctx, dirty);
 
-    					if (dirty[0] & /*showResults*/ 32) {
+    					if (dirty[0] & /*showResults*/ 64) {
     						transition_in(if_block0, 1);
     					}
     				} else {
@@ -1549,11 +1548,11 @@
     				check_outros();
     			}
 
-    			if (/*$$slots*/ ctx[13]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
+    			if (/*$$slots*/ ctx[14]["no-results"] && !/*hideDropdown*/ ctx[4] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
     				if (if_block1) {
     					if_block1.p(ctx, dirty);
 
-    					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 8203) {
+    					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 16403) {
     						transition_in(if_block1, 1);
     					}
     				} else {
@@ -1584,8 +1583,8 @@
     				attr(div, "aria-owns", div_aria_owns_value);
     			}
 
-    			if (!current || dirty[0] & /*showResults*/ 32) {
-    				attr(div, "aria-expanded", /*showResults*/ ctx[5]);
+    			if (!current || dirty[0] & /*showResults*/ 64) {
+    				attr(div, "aria-expanded", /*showResults*/ ctx[6]);
     			}
 
     			if (!current || dirty[0] & /*id*/ 4 && div_id_value !== (div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"))) {
@@ -1614,7 +1613,7 @@
     			destroy_component(search);
     			if (if_block0) if_block0.d();
     			if (if_block1) if_block1.d();
-    			/*div_binding*/ ctx[42](null);
+    			/*div_binding*/ ctx[41](null);
     			mounted = false;
     			dispose();
     		}
@@ -1655,11 +1654,11 @@
 
     	afterUpdate(() => {
     		if (prevResults !== resultsId && autoselect) {
-    			$$invalidate(8, selectedIndex = getNextNonDisabledIndex());
+    			$$invalidate(9, selectedIndex = getNextNonDisabledIndex());
     		}
 
     		if (prevResults !== resultsId && !$$slots["no-results"]) {
-    			$$invalidate(3, hideDropdown = results.length === 0);
+    			$$invalidate(4, hideDropdown = results.length === 0);
     		}
 
     		prevResults = resultsId;
@@ -1723,11 +1722,11 @@
     			disabled = results[index].disabled;
     		}
 
-    		$$invalidate(8, selectedIndex = index);
+    		$$invalidate(9, selectedIndex = index);
     	}
 
-    	const open = () => $$invalidate(3, hideDropdown = false);
-    	const close = () => $$invalidate(3, hideDropdown = true);
+    	const open = () => $$invalidate(4, hideDropdown = false);
+    	const close = () => $$invalidate(4, hideDropdown = true);
 
     	const click_handler = ({ target }) => {
     		if (!hideDropdown && !comboboxRef?.contains(target)) {
@@ -1737,7 +1736,7 @@
 
     	function search_ref_binding(value) {
     		searchRef = value;
-    		$$invalidate(7, searchRef);
+    		$$invalidate(8, searchRef);
     	}
 
     	function search_value_binding(value$1) {
@@ -1763,7 +1762,11 @@
 
     	const focus_handler_1 = () => {
     		open();
-    		$$invalidate(4, isFocused = true);
+
+    		if (showDropdownOnFocus) {
+    			$$invalidate(6, showResults = true);
+    			$$invalidate(5, isFocused = true);
+    		}
     	};
 
     	function clear_handler(event) {
@@ -1774,10 +1777,6 @@
     		bubble.call(this, $$self, event);
     	}
 
-    	const blur_handler_1 = () => {
-    		$$invalidate(4, isFocused = false);
-    	};
-
     	function keydown_handler(event) {
     		bubble.call(this, $$self, event);
     	}
@@ -1808,63 +1807,63 @@
 
     	const click_handler_1 = (result, index) => {
     		if (result.disabled) return;
-    		$$invalidate(8, selectedIndex = index);
+    		$$invalidate(9, selectedIndex = index);
     		select();
     	};
 
     	const mouseenter_handler = (result, index) => {
     		if (result.disabled) return;
-    		$$invalidate(8, selectedIndex = index);
+    		$$invalidate(9, selectedIndex = index);
     	};
 
     	function div_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			comboboxRef = $$value;
-    			$$invalidate(6, comboboxRef);
+    			$$invalidate(7, comboboxRef);
     		});
     	}
 
     	$$self.$$set = $$new_props => {
     		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-    		$$invalidate(14, $$restProps = compute_rest_props($$props, omit_props_names));
+    		$$invalidate(15, $$restProps = compute_rest_props($$props, omit_props_names));
     		if ('id' in $$new_props) $$invalidate(2, id = $$new_props.id);
     		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
-    		if ('data' in $$new_props) $$invalidate(15, data = $$new_props.data);
-    		if ('extract' in $$new_props) $$invalidate(16, extract = $$new_props.extract);
-    		if ('disable' in $$new_props) $$invalidate(17, disable = $$new_props.disable);
-    		if ('filter' in $$new_props) $$invalidate(18, filter = $$new_props.filter);
-    		if ('autoselect' in $$new_props) $$invalidate(19, autoselect = $$new_props.autoselect);
-    		if ('inputAfterSelect' in $$new_props) $$invalidate(20, inputAfterSelect = $$new_props.inputAfterSelect);
+    		if ('data' in $$new_props) $$invalidate(16, data = $$new_props.data);
+    		if ('extract' in $$new_props) $$invalidate(17, extract = $$new_props.extract);
+    		if ('disable' in $$new_props) $$invalidate(18, disable = $$new_props.disable);
+    		if ('filter' in $$new_props) $$invalidate(19, filter = $$new_props.filter);
+    		if ('autoselect' in $$new_props) $$invalidate(20, autoselect = $$new_props.autoselect);
+    		if ('inputAfterSelect' in $$new_props) $$invalidate(21, inputAfterSelect = $$new_props.inputAfterSelect);
     		if ('results' in $$new_props) $$invalidate(1, results = $$new_props.results);
-    		if ('focusAfterSelect' in $$new_props) $$invalidate(21, focusAfterSelect = $$new_props.focusAfterSelect);
-    		if ('showDropdownOnFocus' in $$new_props) $$invalidate(22, showDropdownOnFocus = $$new_props.showDropdownOnFocus);
+    		if ('focusAfterSelect' in $$new_props) $$invalidate(22, focusAfterSelect = $$new_props.focusAfterSelect);
+    		if ('showDropdownOnFocus' in $$new_props) $$invalidate(3, showDropdownOnFocus = $$new_props.showDropdownOnFocus);
     		if ('limit' in $$new_props) $$invalidate(23, limit = $$new_props.limit);
     		if ('$$scope' in $$new_props) $$invalidate(25, $$scope = $$new_props.$$scope);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty[0] & /*extract*/ 65536) {
+    		if ($$self.$$.dirty[0] & /*extract*/ 131072) {
     			$$invalidate(24, options = { pre: "<mark>", post: "</mark>", extract });
     		}
 
-    		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 25591809) {
+    		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 26017793) {
     			$$invalidate(1, results = fuzzy.filter(value, data, options).filter(({ score }) => score > 0).slice(0, limit).filter(result => !filter(result.original)).map(result => ({
     				...result,
     				disabled: disable(result.original)
     			})));
     		}
 
-    		if ($$self.$$.dirty[0] & /*results, extract*/ 65538) {
+    		if ($$self.$$.dirty[0] & /*results, extract*/ 131074) {
     			resultsId = results.map(result => extract(result.original)).join("");
     		}
 
-    		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 10) {
-    			$$invalidate(5, showResults = !hideDropdown && results.length > 0);
+    		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 18) {
+    			$$invalidate(6, showResults = !hideDropdown && results.length > 0);
     		}
 
-    		if ($$self.$$.dirty[0] & /*showDropdownOnFocus, showResults, isFocused*/ 4194352) {
+    		if ($$self.$$.dirty[0] & /*showDropdownOnFocus, showResults, isFocused*/ 104) {
     			if (showDropdownOnFocus) {
-    				$$invalidate(5, showResults = showResults && isFocused);
+    				$$invalidate(6, showResults = showResults && isFocused);
     			}
     		}
     	};
@@ -1873,6 +1872,7 @@
     		value,
     		results,
     		id,
+    		showDropdownOnFocus,
     		hideDropdown,
     		isFocused,
     		showResults,
@@ -1892,7 +1892,6 @@
     		autoselect,
     		inputAfterSelect,
     		focusAfterSelect,
-    		showDropdownOnFocus,
     		limit,
     		options,
     		$$scope,
@@ -1907,7 +1906,6 @@
     		focus_handler_1,
     		clear_handler,
     		blur_handler,
-    		blur_handler_1,
     		keydown_handler,
     		keydown_handler_1,
     		click_handler_1,
@@ -1929,15 +1927,15 @@
     			{
     				id: 2,
     				value: 0,
-    				data: 15,
-    				extract: 16,
-    				disable: 17,
-    				filter: 18,
-    				autoselect: 19,
-    				inputAfterSelect: 20,
+    				data: 16,
+    				extract: 17,
+    				disable: 18,
+    				filter: 19,
+    				autoselect: 20,
+    				inputAfterSelect: 21,
     				results: 1,
-    				focusAfterSelect: 21,
-    				showDropdownOnFocus: 22,
+    				focusAfterSelect: 22,
+    				showDropdownOnFocus: 3,
     				limit: 23
     			},
     			add_css,

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[47],
-	index: /*index*/ ctx[49]
+	result: /*result*/ ctx[46],
+	index: /*index*/ ctx[48]
 });
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[47] = list[i];
-	child_ctx[49] = i;
+	child_ctx[46] = list[i];
+	child_ctx[48] = i;
 	return child_ctx;
 }
 
@@ -1095,8 +1095,8 @@ const get_default_slot_changes = dirty => ({
 });
 
 const get_default_slot_context = ctx => ({
-	result: /*result*/ ctx[47],
-	index: /*index*/ ctx[49],
+	result: /*result*/ ctx[46],
+	index: /*index*/ ctx[48],
 	value: /*value*/ ctx[0]
 });
 
@@ -1132,7 +1132,7 @@ function create_if_block_1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 33555207) {
+			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 33555975) {
 				each_value = /*results*/ ctx[1];
 				let i;
 
@@ -1187,7 +1187,7 @@ function create_if_block_1(ctx) {
 // (248:41)              
 function fallback_block(ctx) {
 	let html_tag;
-	let raw_value = /*result*/ ctx[47].string + "";
+	let raw_value = /*result*/ ctx[46].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[47].string + "")) html_tag.p(raw_value);
+			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[46].string + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -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[47], /*index*/ ctx[49]);
+		return /*click_handler_1*/ ctx[39](/*result*/ ctx[46], /*index*/ ctx[48]);
 	}
 
 	function mouseenter_handler() {
-		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[47], /*index*/ ctx[49]);
+		return /*mouseenter_handler*/ ctx[40](/*result*/ ctx[46], /*index*/ ctx[48]);
 	}
 
 	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[49]));
-			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
+			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]));
+			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[9] === /*index*/ ctx[48]);
 			attr(li, "class", "svelte-9wywte");
-			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
-			toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
+			toggle_class(li, "selected", /*selectedIndex*/ ctx[9] === /*index*/ ctx[48]);
+			toggle_class(li, "disabled", /*result*/ ctx[46].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[49]))) {
+			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]))) {
 				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[49])) {
+			if (!current || dirty[0] & /*selectedIndex*/ 512 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[9] === /*index*/ ctx[48])) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
-			if (dirty[0] & /*selectedIndex*/ 256) {
-				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[49]);
+			if (dirty[0] & /*selectedIndex*/ 512) {
+				toggle_class(li, "selected", /*selectedIndex*/ ctx[9] === /*index*/ ctx[48]);
 			}
 
 			if (dirty[0] & /*results*/ 2) {
-				toggle_class(li, "disabled", /*result*/ ctx[47].disabled);
+				toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
 			}
 		},
 		i(local) {
@@ -1392,7 +1392,7 @@ function create_fragment(ctx) {
 	const search_spread_levels = [
 		{ id: /*id*/ ctx[2] },
 		{ removeFormAriaAttributes: true },
-		/*$$restProps*/ ctx[14],
+		/*$$restProps*/ ctx[15],
 		{ "aria-autocomplete": "list" },
 		{
 			"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1401,8 +1401,8 @@ function create_fragment(ctx) {
 			"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
 		},
 		{
-			"aria-activedescendant": /*selectedIndex*/ ctx[8] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
-			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[8]}`
+			"aria-activedescendant": /*selectedIndex*/ ctx[9] >= 0 && !/*hideDropdown*/ ctx[4] && /*results*/ ctx[1].length > 0
+			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[9]}`
 			: null
 		}
 	];
@@ -1421,8 +1421,8 @@ function create_fragment(ctx) {
 		search_props = assign(search_props, search_spread_levels[i]);
 	}
 
-	if (/*searchRef*/ ctx[7] !== void 0) {
-		search_props.ref = /*searchRef*/ ctx[7];
+	if (/*searchRef*/ ctx[8] !== void 0) {
+		search_props.ref = /*searchRef*/ ctx[8];
 	}
 
 	if (/*value*/ ctx[0] !== void 0) {
@@ -1438,13 +1438,12 @@ function create_fragment(ctx) {
 	search.$on("focus", /*focus_handler*/ ctx[33]);
 	search.$on("focus", /*focus_handler_1*/ ctx[34]);
 	search.$on("clear", /*clear_handler*/ ctx[35]);
-	search.$on("clear", /*open*/ ctx[11]);
+	search.$on("clear", /*open*/ ctx[12]);
 	search.$on("blur", /*blur_handler*/ ctx[36]);
-	search.$on("blur", /*blur_handler_1*/ ctx[37]);
-	search.$on("keydown", /*keydown_handler*/ ctx[38]);
-	search.$on("keydown", /*keydown_handler_1*/ ctx[39]);
-	let if_block0 = /*showResults*/ ctx[5] && create_if_block_1(ctx);
-	let if_block1 = /*$$slots*/ ctx[13]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
+	search.$on("keydown", /*keydown_handler*/ ctx[37]);
+	search.$on("keydown", /*keydown_handler_1*/ ctx[38]);
+	let if_block0 = /*showResults*/ ctx[6] && create_if_block_1(ctx);
+	let if_block1 = /*$$slots*/ ctx[14]["no-results"] && !/*hideDropdown*/ ctx[4] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
 
 	return {
 		c() {
@@ -1464,7 +1463,7 @@ function create_fragment(ctx) {
 			attr(div, "role", "combobox");
 			attr(div, "aria-haspopup", "listbox");
 			attr(div, "aria-owns", div_aria_owns_value = "" + (/*id*/ ctx[2] + "-listbox"));
-			attr(div, "aria-expanded", /*showResults*/ ctx[5]);
+			attr(div, "aria-expanded", /*showResults*/ ctx[6]);
 			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
 			attr(div, "class", "svelte-9wywte");
 			toggle_class(div, "dropdown", /*results*/ ctx[1].length > 0);
@@ -1477,7 +1476,7 @@ function create_fragment(ctx) {
 			if (if_block0) if_block0.m(ul, null);
 			append(ul, t1);
 			if (if_block1) if_block1.m(ul, null);
-			/*div_binding*/ ctx[42](div);
+			/*div_binding*/ ctx[41](div);
 			current = true;
 
 			if (!mounted) {
@@ -1486,11 +1485,11 @@ function create_fragment(ctx) {
 			}
 		},
 		p(ctx, dirty) {
-			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 16654)
+			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 33302)
 			? get_spread_update(search_spread_levels, [
 					dirty[0] & /*id*/ 4 && { id: /*id*/ ctx[2] },
 					search_spread_levels[1],
-					dirty[0] & /*$$restProps*/ 16384 && get_spread_object(/*$$restProps*/ ctx[14]),
+					dirty[0] & /*$$restProps*/ 32768 && get_spread_object(/*$$restProps*/ ctx[15]),
 					search_spread_levels[3],
 					dirty[0] & /*id*/ 4 && {
 						"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1498,17 +1497,17 @@ function create_fragment(ctx) {
 					dirty[0] & /*id*/ 4 && {
 						"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
 					},
-					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 270 && {
-						"aria-activedescendant": /*selectedIndex*/ ctx[8] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
-						? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[8]}`
+					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 534 && {
+						"aria-activedescendant": /*selectedIndex*/ ctx[9] >= 0 && !/*hideDropdown*/ ctx[4] && /*results*/ ctx[1].length > 0
+						? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[9]}`
 						: null
 					}
 				])
 			: {};
 
-			if (!updating_ref && dirty[0] & /*searchRef*/ 128) {
+			if (!updating_ref && dirty[0] & /*searchRef*/ 256) {
 				updating_ref = true;
-				search_changes.ref = /*searchRef*/ ctx[7];
+				search_changes.ref = /*searchRef*/ ctx[8];
 				add_flush_callback(() => updating_ref = false);
 			}
 
@@ -1520,11 +1519,11 @@ function create_fragment(ctx) {
 
 			search.$set(search_changes);
 
-			if (/*showResults*/ ctx[5]) {
+			if (/*showResults*/ ctx[6]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 
-					if (dirty[0] & /*showResults*/ 32) {
+					if (dirty[0] & /*showResults*/ 64) {
 						transition_in(if_block0, 1);
 					}
 				} else {
@@ -1543,11 +1542,11 @@ function create_fragment(ctx) {
 				check_outros();
 			}
 
-			if (/*$$slots*/ ctx[13]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
+			if (/*$$slots*/ ctx[14]["no-results"] && !/*hideDropdown*/ ctx[4] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
 				if (if_block1) {
 					if_block1.p(ctx, dirty);
 
-					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 8203) {
+					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 16403) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -1578,8 +1577,8 @@ function create_fragment(ctx) {
 				attr(div, "aria-owns", div_aria_owns_value);
 			}
 
-			if (!current || dirty[0] & /*showResults*/ 32) {
-				attr(div, "aria-expanded", /*showResults*/ ctx[5]);
+			if (!current || dirty[0] & /*showResults*/ 64) {
+				attr(div, "aria-expanded", /*showResults*/ ctx[6]);
 			}
 
 			if (!current || dirty[0] & /*id*/ 4 && div_id_value !== (div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"))) {
@@ -1608,7 +1607,7 @@ function create_fragment(ctx) {
 			destroy_component(search);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*div_binding*/ ctx[42](null);
+			/*div_binding*/ ctx[41](null);
 			mounted = false;
 			dispose();
 		}
@@ -1649,11 +1648,11 @@ function instance($$self, $$props, $$invalidate) {
 
 	afterUpdate(() => {
 		if (prevResults !== resultsId && autoselect) {
-			$$invalidate(8, selectedIndex = getNextNonDisabledIndex());
+			$$invalidate(9, selectedIndex = getNextNonDisabledIndex());
 		}
 
 		if (prevResults !== resultsId && !$$slots["no-results"]) {
-			$$invalidate(3, hideDropdown = results.length === 0);
+			$$invalidate(4, hideDropdown = results.length === 0);
 		}
 
 		prevResults = resultsId;
@@ -1717,11 +1716,11 @@ function instance($$self, $$props, $$invalidate) {
 			disabled = results[index].disabled;
 		}
 
-		$$invalidate(8, selectedIndex = index);
+		$$invalidate(9, selectedIndex = index);
 	}
 
-	const open = () => $$invalidate(3, hideDropdown = false);
-	const close = () => $$invalidate(3, hideDropdown = true);
+	const open = () => $$invalidate(4, hideDropdown = false);
+	const close = () => $$invalidate(4, hideDropdown = true);
 
 	const click_handler = ({ target }) => {
 		if (!hideDropdown && !comboboxRef?.contains(target)) {
@@ -1731,7 +1730,7 @@ function instance($$self, $$props, $$invalidate) {
 
 	function search_ref_binding(value) {
 		searchRef = value;
-		$$invalidate(7, searchRef);
+		$$invalidate(8, searchRef);
 	}
 
 	function search_value_binding(value$1) {
@@ -1757,7 +1756,11 @@ function instance($$self, $$props, $$invalidate) {
 
 	const focus_handler_1 = () => {
 		open();
-		$$invalidate(4, isFocused = true);
+
+		if (showDropdownOnFocus) {
+			$$invalidate(6, showResults = true);
+			$$invalidate(5, isFocused = true);
+		}
 	};
 
 	function clear_handler(event) {
@@ -1768,10 +1771,6 @@ function instance($$self, $$props, $$invalidate) {
 		bubble.call(this, $$self, event);
 	}
 
-	const blur_handler_1 = () => {
-		$$invalidate(4, isFocused = false);
-	};
-
 	function keydown_handler(event) {
 		bubble.call(this, $$self, event);
 	}
@@ -1802,63 +1801,63 @@ function instance($$self, $$props, $$invalidate) {
 
 	const click_handler_1 = (result, index) => {
 		if (result.disabled) return;
-		$$invalidate(8, selectedIndex = index);
+		$$invalidate(9, selectedIndex = index);
 		select();
 	};
 
 	const mouseenter_handler = (result, index) => {
 		if (result.disabled) return;
-		$$invalidate(8, selectedIndex = index);
+		$$invalidate(9, selectedIndex = index);
 	};
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			comboboxRef = $$value;
-			$$invalidate(6, comboboxRef);
+			$$invalidate(7, comboboxRef);
 		});
 	}
 
 	$$self.$$set = $$new_props => {
 		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-		$$invalidate(14, $$restProps = compute_rest_props($$props, omit_props_names));
+		$$invalidate(15, $$restProps = compute_rest_props($$props, omit_props_names));
 		if ('id' in $$new_props) $$invalidate(2, id = $$new_props.id);
 		if ('value' in $$new_props) $$invalidate(0, value = $$new_props.value);
-		if ('data' in $$new_props) $$invalidate(15, data = $$new_props.data);
-		if ('extract' in $$new_props) $$invalidate(16, extract = $$new_props.extract);
-		if ('disable' in $$new_props) $$invalidate(17, disable = $$new_props.disable);
-		if ('filter' in $$new_props) $$invalidate(18, filter = $$new_props.filter);
-		if ('autoselect' in $$new_props) $$invalidate(19, autoselect = $$new_props.autoselect);
-		if ('inputAfterSelect' in $$new_props) $$invalidate(20, inputAfterSelect = $$new_props.inputAfterSelect);
+		if ('data' in $$new_props) $$invalidate(16, data = $$new_props.data);
+		if ('extract' in $$new_props) $$invalidate(17, extract = $$new_props.extract);
+		if ('disable' in $$new_props) $$invalidate(18, disable = $$new_props.disable);
+		if ('filter' in $$new_props) $$invalidate(19, filter = $$new_props.filter);
+		if ('autoselect' in $$new_props) $$invalidate(20, autoselect = $$new_props.autoselect);
+		if ('inputAfterSelect' in $$new_props) $$invalidate(21, inputAfterSelect = $$new_props.inputAfterSelect);
 		if ('results' in $$new_props) $$invalidate(1, results = $$new_props.results);
-		if ('focusAfterSelect' in $$new_props) $$invalidate(21, focusAfterSelect = $$new_props.focusAfterSelect);
-		if ('showDropdownOnFocus' in $$new_props) $$invalidate(22, showDropdownOnFocus = $$new_props.showDropdownOnFocus);
+		if ('focusAfterSelect' in $$new_props) $$invalidate(22, focusAfterSelect = $$new_props.focusAfterSelect);
+		if ('showDropdownOnFocus' in $$new_props) $$invalidate(3, showDropdownOnFocus = $$new_props.showDropdownOnFocus);
 		if ('limit' in $$new_props) $$invalidate(23, limit = $$new_props.limit);
 		if ('$$scope' in $$new_props) $$invalidate(25, $$scope = $$new_props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*extract*/ 65536) {
+		if ($$self.$$.dirty[0] & /*extract*/ 131072) {
 			$$invalidate(24, options = { pre: "<mark>", post: "</mark>", extract });
 		}
 
-		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 25591809) {
+		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 26017793) {
 			$$invalidate(1, results = fuzzy.filter(value, data, options).filter(({ score }) => score > 0).slice(0, limit).filter(result => !filter(result.original)).map(result => ({
 				...result,
 				disabled: disable(result.original)
 			})));
 		}
 
-		if ($$self.$$.dirty[0] & /*results, extract*/ 65538) {
+		if ($$self.$$.dirty[0] & /*results, extract*/ 131074) {
 			resultsId = results.map(result => extract(result.original)).join("");
 		}
 
-		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 10) {
-			$$invalidate(5, showResults = !hideDropdown && results.length > 0);
+		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 18) {
+			$$invalidate(6, showResults = !hideDropdown && results.length > 0);
 		}
 
-		if ($$self.$$.dirty[0] & /*showDropdownOnFocus, showResults, isFocused*/ 4194352) {
+		if ($$self.$$.dirty[0] & /*showDropdownOnFocus, showResults, isFocused*/ 104) {
 			if (showDropdownOnFocus) {
-				$$invalidate(5, showResults = showResults && isFocused);
+				$$invalidate(6, showResults = showResults && isFocused);
 			}
 		}
 	};
@@ -1867,6 +1866,7 @@ function instance($$self, $$props, $$invalidate) {
 		value,
 		results,
 		id,
+		showDropdownOnFocus,
 		hideDropdown,
 		isFocused,
 		showResults,
@@ -1886,7 +1886,6 @@ function instance($$self, $$props, $$invalidate) {
 		autoselect,
 		inputAfterSelect,
 		focusAfterSelect,
-		showDropdownOnFocus,
 		limit,
 		options,
 		$$scope,
@@ -1901,7 +1900,6 @@ function instance($$self, $$props, $$invalidate) {
 		focus_handler_1,
 		clear_handler,
 		blur_handler,
-		blur_handler_1,
 		keydown_handler,
 		keydown_handler_1,
 		click_handler_1,
@@ -1923,15 +1921,15 @@ class Typeahead extends SvelteComponent {
 			{
 				id: 2,
 				value: 0,
-				data: 15,
-				extract: 16,
-				disable: 17,
-				filter: 18,
-				autoselect: 19,
-				inputAfterSelect: 20,
+				data: 16,
+				extract: 17,
+				disable: 18,
+				filter: 19,
+				autoselect: 20,
+				inputAfterSelect: 21,
 				results: 1,
-				focusAfterSelect: 21,
-				showDropdownOnFocus: 22,
+				focusAfterSelect: 22,
+				showDropdownOnFocus: 3,
 				limit: 23
 			},
 			add_css,

package/package.json

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

package/src/Typeahead.svelte

@@ -188,14 +188,14 @@
     on:focus
     on:focus={() => {
       open();
-      isFocused = true;
+      if (showDropdownOnFocus) {
+        showResults = true;
+        isFocused = true;
+      }
     }}
     on:clear
     on:clear={open}
     on:blur
-    on:blur={() => {
-      isFocused = false;
-    }}
     on:keydown
     on:keydown={(e) => {
       if (results.length === 0) return;