svelte-typeahead 4.2.3 → 4.2.4

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.2.4](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.4) - 2022-07-05
+
+**Fixes**
+
+- set dropdown menu `z-index: 1` when expanded
+
 ## [4.2.3](https://github.com/metonym/svelte-typeahead/releases/tag/v4.2.3) - 2022-07-04
 
 **Fixes**

package/lib/index.js

@@ -1071,7 +1071,7 @@
     /* src/Typeahead.svelte generated by Svelte v3.48.0 */
 
     function add_css(target) {
-    	append_styles(target, "svelte-j5n77y", "[data-svelte-typeahead].svelte-j5n77y{position:relative;background-color:#fff}ul.svelte-j5n77y{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}li.svelte-j5n77y,.no-results.svelte-j5n77y{padding:0.25rem 1rem}li.svelte-j5n77y{cursor:pointer}li.svelte-j5n77y:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-j5n77y:hover{background-color:#e5e5e5}.selected.svelte-j5n77y{background-color:#e5e5e5}.selected.svelte-j5n77y:hover{background-color:#cacaca}.disabled.svelte-j5n77y{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
+    	append_styles(target, "svelte-9wywte", "[data-svelte-typeahead].svelte-9wywte.svelte-9wywte{position:relative;background-color:#fff}ul.svelte-9wywte.svelte-9wywte{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}[aria-expanded=\"true\"].svelte-9wywte ul.svelte-9wywte{z-index:1}li.svelte-9wywte.svelte-9wywte,.no-results.svelte-9wywte.svelte-9wywte{padding:0.25rem 1rem}li.svelte-9wywte.svelte-9wywte{cursor:pointer}li.svelte-9wywte.svelte-9wywte:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-9wywte.svelte-9wywte:hover{background-color:#e5e5e5}.selected.svelte-9wywte.svelte-9wywte{background-color:#e5e5e5}.selected.svelte-9wywte.svelte-9wywte:hover{background-color:#cacaca}.disabled.svelte-9wywte.svelte-9wywte{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
     }
 
     const get_no_results_slot_changes = dirty => ({
@@ -1081,14 +1081,14 @@
 
     const get_no_results_slot_context = ctx => ({
     	value: /*value*/ ctx[0],
-    	result: /*result*/ ctx[41],
-    	index: /*i*/ ctx[43]
+    	result: /*result*/ ctx[42],
+    	index: /*index*/ ctx[44]
     });
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[41] = list[i];
-    	child_ctx[43] = i;
+    	child_ctx[42] = list[i];
+    	child_ctx[44] = i;
     	return child_ctx;
     }
 
@@ -1098,12 +1098,12 @@
     });
 
     const get_default_slot_context = ctx => ({
-    	result: /*result*/ ctx[41],
-    	index: /*i*/ ctx[43],
+    	result: /*result*/ ctx[42],
+    	index: /*index*/ ctx[44],
     	value: /*value*/ ctx[0]
     });
 
-    // (198:4) {#if !hideDropdown && results.length > 0}
+    // (201:4) {#if showResults}
     function create_if_block_1(ctx) {
     	let each_1_anchor;
     	let current;
@@ -1135,7 +1135,7 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 1048775) {
+    			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 2097479) {
     				each_value = /*results*/ ctx[1];
     				let i;
 
@@ -1187,10 +1187,10 @@
     	};
     }
 
-    // (217:43)              
+    // (219:41)              
     function fallback_block(ctx) {
     	let html_tag;
-    	let raw_value = /*result*/ ctx[41].string + "";
+    	let raw_value = /*result*/ ctx[42].string + "";
     	let html_anchor;
 
     	return {
@@ -1204,7 +1204,7 @@
     			insert(target, html_anchor, anchor);
     		},
     		p(ctx, dirty) {
-    			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[41].string + "")) html_tag.p(raw_value);
+    			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[42].string + "")) html_tag.p(raw_value);
     		},
     		d(detaching) {
     			if (detaching) detach(html_anchor);
@@ -1213,7 +1213,7 @@
     	};
     }
 
-    // (199:6) {#each results as result, i}
+    // (202:6) {#each results as result, index}
     function create_each_block(ctx) {
     	let li;
     	let t;
@@ -1222,16 +1222,16 @@
     	let current;
     	let mounted;
     	let dispose;
-    	const default_slot_template = /*#slots*/ ctx[21].default;
-    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], get_default_slot_context);
+    	const default_slot_template = /*#slots*/ ctx[22].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[21], get_default_slot_context);
     	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
     	function click_handler_1() {
-    		return /*click_handler_1*/ ctx[35](/*result*/ ctx[41], /*i*/ ctx[43]);
+    		return /*click_handler_1*/ ctx[36](/*result*/ ctx[42], /*index*/ ctx[44]);
     	}
 
     	function mouseenter_handler() {
-    		return /*mouseenter_handler*/ ctx[36](/*result*/ ctx[41], /*i*/ ctx[43]);
+    		return /*mouseenter_handler*/ ctx[37](/*result*/ ctx[42], /*index*/ ctx[44]);
     	}
 
     	return {
@@ -1240,11 +1240,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-" + /*i*/ ctx[43]));
-    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[43]);
-    			attr(li, "class", "svelte-j5n77y");
-    			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[43]);
-    			toggle_class(li, "disabled", /*result*/ ctx[41].disabled);
+    			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[44]));
+    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
+    			attr(li, "class", "svelte-9wywte");
+    			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
+    			toggle_class(li, "disabled", /*result*/ ctx[42].disabled);
     		},
     		m(target, anchor) {
     			insert(target, li, anchor);
@@ -1269,15 +1269,15 @@
     			ctx = new_ctx;
 
     			if (default_slot) {
-    				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 1048579)) {
+    				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 2097155)) {
     					update_slot_base(
     						default_slot,
     						default_slot_template,
     						ctx,
-    						/*$$scope*/ ctx[20],
+    						/*$$scope*/ ctx[21],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
-    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, get_default_slot_changes),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[21])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[21], dirty, get_default_slot_changes),
     						get_default_slot_context
     					);
     				}
@@ -1287,20 +1287,20 @@
     				}
     			}
 
-    			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*i*/ ctx[43]))) {
+    			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[44]))) {
     				attr(li, "id", li_id_value);
     			}
 
-    			if (!current || dirty[0] & /*selectedIndex*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[43])) {
+    			if (!current || dirty[0] & /*selectedIndex*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*index*/ ctx[44])) {
     				attr(li, "aria-selected", li_aria_selected_value);
     			}
 
     			if (dirty[0] & /*selectedIndex*/ 64) {
-    				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[43]);
+    				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
     			}
 
     			if (dirty[0] & /*results*/ 2) {
-    				toggle_class(li, "disabled", /*result*/ ctx[41].disabled);
+    				toggle_class(li, "disabled", /*result*/ ctx[42].disabled);
     			}
     		},
     		i(local) {
@@ -1321,18 +1321,18 @@
     	};
     }
 
-    // (223:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+    // (225:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
     function create_if_block(ctx) {
     	let div;
     	let current;
-    	const no_results_slot_template = /*#slots*/ ctx[21]["no-results"];
-    	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[20], get_no_results_slot_context);
+    	const no_results_slot_template = /*#slots*/ ctx[22]["no-results"];
+    	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[21], get_no_results_slot_context);
 
     	return {
     		c() {
     			div = element("div");
     			if (no_results_slot) no_results_slot.c();
-    			attr(div, "class", "svelte-j5n77y");
+    			attr(div, "class", "svelte-9wywte");
     			toggle_class(div, "no-results", true);
     		},
     		m(target, anchor) {
@@ -1346,15 +1346,15 @@
     		},
     		p(ctx, dirty) {
     			if (no_results_slot) {
-    				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 1048579)) {
+    				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 2097155)) {
     					update_slot_base(
     						no_results_slot,
     						no_results_slot_template,
     						ctx,
-    						/*$$scope*/ ctx[20],
+    						/*$$scope*/ ctx[21],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
-    						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[20], dirty, get_no_results_slot_changes),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[21])
+    						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[21], dirty, get_no_results_slot_changes),
     						get_no_results_slot_context
     					);
     				}
@@ -1387,7 +1387,6 @@
     	let ul_aria_labelledby_value;
     	let ul_id_value;
     	let div_aria_owns_value;
-    	let div_aria_expanded_value;
     	let div_id_value;
     	let current;
     	let mounted;
@@ -1396,7 +1395,7 @@
     	const search_spread_levels = [
     		{ id: /*id*/ ctx[2] },
     		{ removeFormAriaAttributes: true },
-    		/*$$restProps*/ ctx[10],
+    		/*$$restProps*/ ctx[11],
     		{ "aria-autocomplete": "list" },
     		{
     			"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1405,18 +1404,18 @@
     			"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
     		},
     		{
-    			"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0
+    			"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
     			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[6]}`
     			: null
     		}
     	];
 
     	function search_ref_binding(value) {
-    		/*search_ref_binding*/ ctx[23](value);
+    		/*search_ref_binding*/ ctx[24](value);
     	}
 
     	function search_value_binding(value) {
-    		/*search_value_binding*/ ctx[24](value);
+    		/*search_value_binding*/ ctx[25](value);
     	}
 
     	let search_props = {};
@@ -1425,8 +1424,8 @@
     		search_props = assign(search_props, search_spread_levels[i]);
     	}
 
-    	if (/*searchRef*/ ctx[4] !== void 0) {
-    		search_props.ref = /*searchRef*/ ctx[4];
+    	if (/*searchRef*/ ctx[5] !== void 0) {
+    		search_props.ref = /*searchRef*/ ctx[5];
     	}
 
     	if (/*value*/ ctx[0] !== void 0) {
@@ -1436,18 +1435,18 @@
     	search = new Search$1({ props: search_props });
     	binding_callbacks.push(() => bind(search, 'ref', search_ref_binding));
     	binding_callbacks.push(() => bind(search, 'value', search_value_binding));
-    	search.$on("type", /*type_handler*/ ctx[25]);
-    	search.$on("input", /*input_handler*/ ctx[26]);
-    	search.$on("change", /*change_handler*/ ctx[27]);
-    	search.$on("focus", /*focus_handler*/ ctx[28]);
-    	search.$on("focus", /*focus_handler_1*/ ctx[29]);
-    	search.$on("clear", /*clear_handler*/ ctx[30]);
-    	search.$on("clear", /*clear_handler_1*/ ctx[31]);
-    	search.$on("blur", /*blur_handler*/ ctx[32]);
-    	search.$on("keydown", /*keydown_handler*/ ctx[33]);
-    	search.$on("keydown", /*keydown_handler_1*/ ctx[34]);
-    	let if_block0 = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0 && create_if_block_1(ctx);
-    	let if_block1 = /*$$slots*/ ctx[9]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
+    	search.$on("type", /*type_handler*/ ctx[26]);
+    	search.$on("input", /*input_handler*/ ctx[27]);
+    	search.$on("change", /*change_handler*/ ctx[28]);
+    	search.$on("focus", /*focus_handler*/ ctx[29]);
+    	search.$on("focus", /*focus_handler_1*/ ctx[30]);
+    	search.$on("clear", /*clear_handler*/ ctx[31]);
+    	search.$on("clear", /*clear_handler_1*/ ctx[32]);
+    	search.$on("blur", /*blur_handler*/ ctx[33]);
+    	search.$on("keydown", /*keydown_handler*/ ctx[34]);
+    	search.$on("keydown", /*keydown_handler_1*/ ctx[35]);
+    	let if_block0 = /*showResults*/ ctx[7] && create_if_block_1(ctx);
+    	let if_block1 = /*$$slots*/ ctx[10]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
 
     	return {
     		c() {
@@ -1461,15 +1460,15 @@
     			attr(ul, "role", "listbox");
     			attr(ul, "aria-labelledby", ul_aria_labelledby_value = "" + (/*id*/ ctx[2] + "-label"));
     			attr(ul, "id", ul_id_value = "" + (/*id*/ ctx[2] + "-listbox"));
-    			attr(ul, "class", "svelte-j5n77y");
+    			attr(ul, "class", "svelte-9wywte");
     			toggle_class(ul, "svelte-typeahead-list", true);
     			attr(div, "data-svelte-typeahead", "");
     			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", div_aria_expanded_value = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0);
+    			attr(div, "aria-expanded", /*showResults*/ ctx[7]);
     			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
-    			attr(div, "class", "svelte-j5n77y");
+    			attr(div, "class", "svelte-9wywte");
     			toggle_class(div, "dropdown", /*results*/ ctx[1].length > 0);
     		},
     		m(target, anchor) {
@@ -1480,20 +1479,20 @@
     			if (if_block0) if_block0.m(ul, null);
     			append(ul, t1);
     			if (if_block1) if_block1.m(ul, null);
-    			/*div_binding*/ ctx[37](div);
+    			/*div_binding*/ ctx[38](div);
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen(window, "click", /*click_handler*/ ctx[22]);
+    				dispose = listen(window, "click", /*click_handler*/ ctx[23]);
     				mounted = true;
     			}
     		},
     		p(ctx, dirty) {
-    			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 1126)
+    			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 2126)
     			? get_spread_update(search_spread_levels, [
     					dirty[0] & /*id*/ 4 && { id: /*id*/ ctx[2] },
     					search_spread_levels[1],
-    					dirty[0] & /*$$restProps*/ 1024 && get_spread_object(/*$$restProps*/ ctx[10]),
+    					dirty[0] & /*$$restProps*/ 2048 && get_spread_object(/*$$restProps*/ ctx[11]),
     					search_spread_levels[3],
     					dirty[0] & /*id*/ 4 && {
     						"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1501,17 +1500,17 @@
     					dirty[0] & /*id*/ 4 && {
     						"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
     					},
-    					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 102 && {
-    						"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0
+    					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 78 && {
+    						"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
     						? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[6]}`
     						: null
     					}
     				])
     			: {};
 
-    			if (!updating_ref && dirty[0] & /*searchRef*/ 16) {
+    			if (!updating_ref && dirty[0] & /*searchRef*/ 32) {
     				updating_ref = true;
-    				search_changes.ref = /*searchRef*/ ctx[4];
+    				search_changes.ref = /*searchRef*/ ctx[5];
     				add_flush_callback(() => updating_ref = false);
     			}
 
@@ -1523,11 +1522,11 @@
 
     			search.$set(search_changes);
 
-    			if (!/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0) {
+    			if (/*showResults*/ ctx[7]) {
     				if (if_block0) {
     					if_block0.p(ctx, dirty);
 
-    					if (dirty[0] & /*hideDropdown, results*/ 34) {
+    					if (dirty[0] & /*showResults*/ 128) {
     						transition_in(if_block0, 1);
     					}
     				} else {
@@ -1546,11 +1545,11 @@
     				check_outros();
     			}
 
-    			if (/*$$slots*/ ctx[9]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
+    			if (/*$$slots*/ ctx[10]["no-results"] && !/*hideDropdown*/ ctx[3] && /*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*/ 547) {
+    					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 1035) {
     						transition_in(if_block1, 1);
     					}
     				} else {
@@ -1581,8 +1580,8 @@
     				attr(div, "aria-owns", div_aria_owns_value);
     			}
 
-    			if (!current || dirty[0] & /*hideDropdown, results*/ 34 && div_aria_expanded_value !== (div_aria_expanded_value = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0)) {
-    				attr(div, "aria-expanded", div_aria_expanded_value);
+    			if (!current || dirty[0] & /*showResults*/ 128) {
+    				attr(div, "aria-expanded", /*showResults*/ ctx[7]);
     			}
 
     			if (!current || dirty[0] & /*id*/ 4 && div_id_value !== (div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"))) {
@@ -1611,7 +1610,7 @@
     			destroy_component(search);
     			if (if_block0) if_block0.d();
     			if (if_block1) if_block1.d();
-    			/*div_binding*/ ctx[37](null);
+    			/*div_binding*/ ctx[38](null);
     			mounted = false;
     			dispose();
     		}
@@ -1621,6 +1620,7 @@
     function instance($$self, $$props, $$invalidate) {
     	let options;
     	let resultsId;
+    	let showResults;
 
     	const omit_props_names = [
     		"id","value","data","extract","disable","filter","autoselect","inputAfterSelect","results","focusAfterSelect","limit"
@@ -1653,7 +1653,7 @@
     		}
 
     		if (prevResults !== resultsId && !$$slots["no-results"]) {
-    			$$invalidate(5, hideDropdown = results.length === 0);
+    			$$invalidate(3, hideDropdown = results.length === 0);
     		}
 
     		prevResults = resultsId;
@@ -1677,7 +1677,7 @@
 
     		await tick();
     		if (focusAfterSelect) searchRef.focus();
-    		$$invalidate(5, hideDropdown = true);
+    		$$invalidate(3, hideDropdown = true);
     	}
 
     	/** @type {(direction: -1 | 1) => void} */
@@ -1704,13 +1704,13 @@
 
     	const click_handler = ({ target }) => {
     		if (!hideDropdown && comboboxRef && !comboboxRef.contains(target)) {
-    			$$invalidate(5, hideDropdown = true);
+    			$$invalidate(3, hideDropdown = true);
     		}
     	};
 
     	function search_ref_binding(value) {
     		searchRef = value;
-    		$$invalidate(4, searchRef);
+    		$$invalidate(5, searchRef);
     	}
 
     	function search_value_binding(value$1) {
@@ -1735,7 +1735,7 @@
     	}
 
     	const focus_handler_1 = () => {
-    		$$invalidate(5, hideDropdown = false);
+    		$$invalidate(3, hideDropdown = false);
     	};
 
     	function clear_handler(event) {
@@ -1743,7 +1743,7 @@
     	}
 
     	const clear_handler_1 = () => {
-    		$$invalidate(5, hideDropdown = false);
+    		$$invalidate(3, hideDropdown = false);
     	};
 
     	function blur_handler(event) {
@@ -1773,72 +1773,76 @@
     				e.preventDefault();
     				$$invalidate(0, value = "");
     				searchRef.focus();
-    				$$invalidate(5, hideDropdown = true);
+    				$$invalidate(3, hideDropdown = true);
     				break;
     		}
     	};
 
-    	const click_handler_1 = (result, i) => {
-    		if (!result.disabled) {
-    			$$invalidate(6, selectedIndex = i);
-    			select();
-    		}
+    	const click_handler_1 = (result, index) => {
+    		if (result.disabled) return;
+    		$$invalidate(6, selectedIndex = index);
+    		select();
     	};
 
-    	const mouseenter_handler = (result, i) => {
+    	const mouseenter_handler = (result, index) => {
     		if (result.disabled) return;
-    		$$invalidate(6, selectedIndex = i);
+    		$$invalidate(6, selectedIndex = index);
     	};
 
     	function div_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			comboboxRef = $$value;
-    			$$invalidate(3, comboboxRef);
+    			$$invalidate(4, comboboxRef);
     		});
     	}
 
     	$$self.$$set = $$new_props => {
     		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-    		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
+    		$$invalidate(11, $$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(11, data = $$new_props.data);
-    		if ('extract' in $$new_props) $$invalidate(12, extract = $$new_props.extract);
-    		if ('disable' in $$new_props) $$invalidate(13, disable = $$new_props.disable);
-    		if ('filter' in $$new_props) $$invalidate(14, filter = $$new_props.filter);
-    		if ('autoselect' in $$new_props) $$invalidate(15, autoselect = $$new_props.autoselect);
-    		if ('inputAfterSelect' in $$new_props) $$invalidate(16, inputAfterSelect = $$new_props.inputAfterSelect);
+    		if ('data' in $$new_props) $$invalidate(12, data = $$new_props.data);
+    		if ('extract' in $$new_props) $$invalidate(13, extract = $$new_props.extract);
+    		if ('disable' in $$new_props) $$invalidate(14, disable = $$new_props.disable);
+    		if ('filter' in $$new_props) $$invalidate(15, filter = $$new_props.filter);
+    		if ('autoselect' in $$new_props) $$invalidate(16, autoselect = $$new_props.autoselect);
+    		if ('inputAfterSelect' in $$new_props) $$invalidate(17, inputAfterSelect = $$new_props.inputAfterSelect);
     		if ('results' in $$new_props) $$invalidate(1, results = $$new_props.results);
-    		if ('focusAfterSelect' in $$new_props) $$invalidate(17, focusAfterSelect = $$new_props.focusAfterSelect);
-    		if ('limit' in $$new_props) $$invalidate(18, limit = $$new_props.limit);
-    		if ('$$scope' in $$new_props) $$invalidate(20, $$scope = $$new_props.$$scope);
+    		if ('focusAfterSelect' in $$new_props) $$invalidate(18, focusAfterSelect = $$new_props.focusAfterSelect);
+    		if ('limit' in $$new_props) $$invalidate(19, limit = $$new_props.limit);
+    		if ('$$scope' in $$new_props) $$invalidate(21, $$scope = $$new_props.$$scope);
     	};
 
     	$$self.$$.update = () => {
-    		if ($$self.$$.dirty[0] & /*extract*/ 4096) {
-    			$$invalidate(19, options = { pre: "<mark>", post: "</mark>", extract });
+    		if ($$self.$$.dirty[0] & /*extract*/ 8192) {
+    			$$invalidate(20, options = { pre: "<mark>", post: "</mark>", extract });
     		}
 
-    		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 813057) {
+    		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 1626113) {
     			$$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*/ 4098) {
+    		if ($$self.$$.dirty[0] & /*results, extract*/ 8194) {
     			resultsId = results.map(result => extract(result.original)).join("");
     		}
+
+    		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 10) {
+    			$$invalidate(7, showResults = !hideDropdown && results.length > 0);
+    		}
     	};
 
     	return [
     		value,
     		results,
     		id,
+    		hideDropdown,
     		comboboxRef,
     		searchRef,
-    		hideDropdown,
     		selectedIndex,
+    		showResults,
     		select,
     		change,
     		$$slots,
@@ -1886,15 +1890,15 @@
     			{
     				id: 2,
     				value: 0,
-    				data: 11,
-    				extract: 12,
-    				disable: 13,
-    				filter: 14,
-    				autoselect: 15,
-    				inputAfterSelect: 16,
+    				data: 12,
+    				extract: 13,
+    				disable: 14,
+    				filter: 15,
+    				autoselect: 16,
+    				inputAfterSelect: 17,
     				results: 1,
-    				focusAfterSelect: 17,
-    				limit: 18
+    				focusAfterSelect: 18,
+    				limit: 19
     			},
     			add_css,
     			[-1, -1]

package/lib/index.mjs

@@ -1065,7 +1065,7 @@ var Search$1 = Search;
 /* src/Typeahead.svelte generated by Svelte v3.48.0 */
 
 function add_css(target) {
-	append_styles(target, "svelte-j5n77y", "[data-svelte-typeahead].svelte-j5n77y{position:relative;background-color:#fff}ul.svelte-j5n77y{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}li.svelte-j5n77y,.no-results.svelte-j5n77y{padding:0.25rem 1rem}li.svelte-j5n77y{cursor:pointer}li.svelte-j5n77y:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-j5n77y:hover{background-color:#e5e5e5}.selected.svelte-j5n77y{background-color:#e5e5e5}.selected.svelte-j5n77y:hover{background-color:#cacaca}.disabled.svelte-j5n77y{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
+	append_styles(target, "svelte-9wywte", "[data-svelte-typeahead].svelte-9wywte.svelte-9wywte{position:relative;background-color:#fff}ul.svelte-9wywte.svelte-9wywte{position:absolute;top:100%;left:0;width:100%;padding:0;list-style:none;background-color:inherit;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1)}[aria-expanded=\"true\"].svelte-9wywte ul.svelte-9wywte{z-index:1}li.svelte-9wywte.svelte-9wywte,.no-results.svelte-9wywte.svelte-9wywte{padding:0.25rem 1rem}li.svelte-9wywte.svelte-9wywte{cursor:pointer}li.svelte-9wywte.svelte-9wywte:not(:last-of-type){border-bottom:1px solid #e0e0e0}li.svelte-9wywte.svelte-9wywte:hover{background-color:#e5e5e5}.selected.svelte-9wywte.svelte-9wywte{background-color:#e5e5e5}.selected.svelte-9wywte.svelte-9wywte:hover{background-color:#cacaca}.disabled.svelte-9wywte.svelte-9wywte{opacity:0.4;cursor:not-allowed}[data-svelte-search] label{margin-bottom:0.25rem;display:inline-flex;font-size:0.875rem}[data-svelte-search] input{width:100%;padding:0.5rem 0.75rem;background:none;font-size:1rem;border:0;border-radius:0;border:1px solid #e5e5e5}[data-svelte-search] input:focus{outline-color:#0f62fe;outline-offset:2px;outline-width:1px}");
 }
 
 const get_no_results_slot_changes = dirty => ({
@@ -1075,14 +1075,14 @@ const get_no_results_slot_changes = dirty => ({
 
 const get_no_results_slot_context = ctx => ({
 	value: /*value*/ ctx[0],
-	result: /*result*/ ctx[41],
-	index: /*i*/ ctx[43]
+	result: /*result*/ ctx[42],
+	index: /*index*/ ctx[44]
 });
 
 function get_each_context(ctx, list, i) {
 	const child_ctx = ctx.slice();
-	child_ctx[41] = list[i];
-	child_ctx[43] = i;
+	child_ctx[42] = list[i];
+	child_ctx[44] = i;
 	return child_ctx;
 }
 
@@ -1092,12 +1092,12 @@ const get_default_slot_changes = dirty => ({
 });
 
 const get_default_slot_context = ctx => ({
-	result: /*result*/ ctx[41],
-	index: /*i*/ ctx[43],
+	result: /*result*/ ctx[42],
+	index: /*index*/ ctx[44],
 	value: /*value*/ ctx[0]
 });
 
-// (198:4) {#if !hideDropdown && results.length > 0}
+// (201:4) {#if showResults}
 function create_if_block_1(ctx) {
 	let each_1_anchor;
 	let current;
@@ -1129,7 +1129,7 @@ function create_if_block_1(ctx) {
 			current = true;
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 1048775) {
+			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 2097479) {
 				each_value = /*results*/ ctx[1];
 				let i;
 
@@ -1181,10 +1181,10 @@ function create_if_block_1(ctx) {
 	};
 }
 
-// (217:43)              
+// (219:41)              
 function fallback_block(ctx) {
 	let html_tag;
-	let raw_value = /*result*/ ctx[41].string + "";
+	let raw_value = /*result*/ ctx[42].string + "";
 	let html_anchor;
 
 	return {
@@ -1198,7 +1198,7 @@ function fallback_block(ctx) {
 			insert(target, html_anchor, anchor);
 		},
 		p(ctx, dirty) {
-			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[41].string + "")) html_tag.p(raw_value);
+			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[42].string + "")) html_tag.p(raw_value);
 		},
 		d(detaching) {
 			if (detaching) detach(html_anchor);
@@ -1207,7 +1207,7 @@ function fallback_block(ctx) {
 	};
 }
 
-// (199:6) {#each results as result, i}
+// (202:6) {#each results as result, index}
 function create_each_block(ctx) {
 	let li;
 	let t;
@@ -1216,16 +1216,16 @@ function create_each_block(ctx) {
 	let current;
 	let mounted;
 	let dispose;
-	const default_slot_template = /*#slots*/ ctx[21].default;
-	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[20], get_default_slot_context);
+	const default_slot_template = /*#slots*/ ctx[22].default;
+	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[21], get_default_slot_context);
 	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
 	function click_handler_1() {
-		return /*click_handler_1*/ ctx[35](/*result*/ ctx[41], /*i*/ ctx[43]);
+		return /*click_handler_1*/ ctx[36](/*result*/ ctx[42], /*index*/ ctx[44]);
 	}
 
 	function mouseenter_handler() {
-		return /*mouseenter_handler*/ ctx[36](/*result*/ ctx[41], /*i*/ ctx[43]);
+		return /*mouseenter_handler*/ ctx[37](/*result*/ ctx[42], /*index*/ ctx[44]);
 	}
 
 	return {
@@ -1234,11 +1234,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-" + /*i*/ ctx[43]));
-			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[43]);
-			attr(li, "class", "svelte-j5n77y");
-			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[43]);
-			toggle_class(li, "disabled", /*result*/ ctx[41].disabled);
+			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[44]));
+			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
+			attr(li, "class", "svelte-9wywte");
+			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
+			toggle_class(li, "disabled", /*result*/ ctx[42].disabled);
 		},
 		m(target, anchor) {
 			insert(target, li, anchor);
@@ -1263,15 +1263,15 @@ function create_each_block(ctx) {
 			ctx = new_ctx;
 
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 1048579)) {
+				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 2097155)) {
 					update_slot_base(
 						default_slot,
 						default_slot_template,
 						ctx,
-						/*$$scope*/ ctx[20],
+						/*$$scope*/ ctx[21],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
-						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[20], dirty, get_default_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[21])
+						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[21], dirty, get_default_slot_changes),
 						get_default_slot_context
 					);
 				}
@@ -1281,20 +1281,20 @@ function create_each_block(ctx) {
 				}
 			}
 
-			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*i*/ ctx[43]))) {
+			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[44]))) {
 				attr(li, "id", li_id_value);
 			}
 
-			if (!current || dirty[0] & /*selectedIndex*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*i*/ ctx[43])) {
+			if (!current || dirty[0] & /*selectedIndex*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*index*/ ctx[44])) {
 				attr(li, "aria-selected", li_aria_selected_value);
 			}
 
 			if (dirty[0] & /*selectedIndex*/ 64) {
-				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*i*/ ctx[43]);
+				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
 			}
 
 			if (dirty[0] & /*results*/ 2) {
-				toggle_class(li, "disabled", /*result*/ ctx[41].disabled);
+				toggle_class(li, "disabled", /*result*/ ctx[42].disabled);
 			}
 		},
 		i(local) {
@@ -1315,18 +1315,18 @@ function create_each_block(ctx) {
 	};
 }
 
-// (223:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+// (225:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
 function create_if_block(ctx) {
 	let div;
 	let current;
-	const no_results_slot_template = /*#slots*/ ctx[21]["no-results"];
-	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[20], get_no_results_slot_context);
+	const no_results_slot_template = /*#slots*/ ctx[22]["no-results"];
+	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[21], get_no_results_slot_context);
 
 	return {
 		c() {
 			div = element("div");
 			if (no_results_slot) no_results_slot.c();
-			attr(div, "class", "svelte-j5n77y");
+			attr(div, "class", "svelte-9wywte");
 			toggle_class(div, "no-results", true);
 		},
 		m(target, anchor) {
@@ -1340,15 +1340,15 @@ function create_if_block(ctx) {
 		},
 		p(ctx, dirty) {
 			if (no_results_slot) {
-				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 1048579)) {
+				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 2097155)) {
 					update_slot_base(
 						no_results_slot,
 						no_results_slot_template,
 						ctx,
-						/*$$scope*/ ctx[20],
+						/*$$scope*/ ctx[21],
 						!current
-						? get_all_dirty_from_scope(/*$$scope*/ ctx[20])
-						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[20], dirty, get_no_results_slot_changes),
+						? get_all_dirty_from_scope(/*$$scope*/ ctx[21])
+						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[21], dirty, get_no_results_slot_changes),
 						get_no_results_slot_context
 					);
 				}
@@ -1381,7 +1381,6 @@ function create_fragment(ctx) {
 	let ul_aria_labelledby_value;
 	let ul_id_value;
 	let div_aria_owns_value;
-	let div_aria_expanded_value;
 	let div_id_value;
 	let current;
 	let mounted;
@@ -1390,7 +1389,7 @@ function create_fragment(ctx) {
 	const search_spread_levels = [
 		{ id: /*id*/ ctx[2] },
 		{ removeFormAriaAttributes: true },
-		/*$$restProps*/ ctx[10],
+		/*$$restProps*/ ctx[11],
 		{ "aria-autocomplete": "list" },
 		{
 			"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1399,18 +1398,18 @@ function create_fragment(ctx) {
 			"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
 		},
 		{
-			"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0
+			"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
 			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[6]}`
 			: null
 		}
 	];
 
 	function search_ref_binding(value) {
-		/*search_ref_binding*/ ctx[23](value);
+		/*search_ref_binding*/ ctx[24](value);
 	}
 
 	function search_value_binding(value) {
-		/*search_value_binding*/ ctx[24](value);
+		/*search_value_binding*/ ctx[25](value);
 	}
 
 	let search_props = {};
@@ -1419,8 +1418,8 @@ function create_fragment(ctx) {
 		search_props = assign(search_props, search_spread_levels[i]);
 	}
 
-	if (/*searchRef*/ ctx[4] !== void 0) {
-		search_props.ref = /*searchRef*/ ctx[4];
+	if (/*searchRef*/ ctx[5] !== void 0) {
+		search_props.ref = /*searchRef*/ ctx[5];
 	}
 
 	if (/*value*/ ctx[0] !== void 0) {
@@ -1430,18 +1429,18 @@ function create_fragment(ctx) {
 	search = new Search$1({ props: search_props });
 	binding_callbacks.push(() => bind(search, 'ref', search_ref_binding));
 	binding_callbacks.push(() => bind(search, 'value', search_value_binding));
-	search.$on("type", /*type_handler*/ ctx[25]);
-	search.$on("input", /*input_handler*/ ctx[26]);
-	search.$on("change", /*change_handler*/ ctx[27]);
-	search.$on("focus", /*focus_handler*/ ctx[28]);
-	search.$on("focus", /*focus_handler_1*/ ctx[29]);
-	search.$on("clear", /*clear_handler*/ ctx[30]);
-	search.$on("clear", /*clear_handler_1*/ ctx[31]);
-	search.$on("blur", /*blur_handler*/ ctx[32]);
-	search.$on("keydown", /*keydown_handler*/ ctx[33]);
-	search.$on("keydown", /*keydown_handler_1*/ ctx[34]);
-	let if_block0 = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0 && create_if_block_1(ctx);
-	let if_block1 = /*$$slots*/ ctx[9]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
+	search.$on("type", /*type_handler*/ ctx[26]);
+	search.$on("input", /*input_handler*/ ctx[27]);
+	search.$on("change", /*change_handler*/ ctx[28]);
+	search.$on("focus", /*focus_handler*/ ctx[29]);
+	search.$on("focus", /*focus_handler_1*/ ctx[30]);
+	search.$on("clear", /*clear_handler*/ ctx[31]);
+	search.$on("clear", /*clear_handler_1*/ ctx[32]);
+	search.$on("blur", /*blur_handler*/ ctx[33]);
+	search.$on("keydown", /*keydown_handler*/ ctx[34]);
+	search.$on("keydown", /*keydown_handler_1*/ ctx[35]);
+	let if_block0 = /*showResults*/ ctx[7] && create_if_block_1(ctx);
+	let if_block1 = /*$$slots*/ ctx[10]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0 && create_if_block(ctx);
 
 	return {
 		c() {
@@ -1455,15 +1454,15 @@ function create_fragment(ctx) {
 			attr(ul, "role", "listbox");
 			attr(ul, "aria-labelledby", ul_aria_labelledby_value = "" + (/*id*/ ctx[2] + "-label"));
 			attr(ul, "id", ul_id_value = "" + (/*id*/ ctx[2] + "-listbox"));
-			attr(ul, "class", "svelte-j5n77y");
+			attr(ul, "class", "svelte-9wywte");
 			toggle_class(ul, "svelte-typeahead-list", true);
 			attr(div, "data-svelte-typeahead", "");
 			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", div_aria_expanded_value = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0);
+			attr(div, "aria-expanded", /*showResults*/ ctx[7]);
 			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
-			attr(div, "class", "svelte-j5n77y");
+			attr(div, "class", "svelte-9wywte");
 			toggle_class(div, "dropdown", /*results*/ ctx[1].length > 0);
 		},
 		m(target, anchor) {
@@ -1474,20 +1473,20 @@ 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[37](div);
+			/*div_binding*/ ctx[38](div);
 			current = true;
 
 			if (!mounted) {
-				dispose = listen(window, "click", /*click_handler*/ ctx[22]);
+				dispose = listen(window, "click", /*click_handler*/ ctx[23]);
 				mounted = true;
 			}
 		},
 		p(ctx, dirty) {
-			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 1126)
+			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 2126)
 			? get_spread_update(search_spread_levels, [
 					dirty[0] & /*id*/ 4 && { id: /*id*/ ctx[2] },
 					search_spread_levels[1],
-					dirty[0] & /*$$restProps*/ 1024 && get_spread_object(/*$$restProps*/ ctx[10]),
+					dirty[0] & /*$$restProps*/ 2048 && get_spread_object(/*$$restProps*/ ctx[11]),
 					search_spread_levels[3],
 					dirty[0] & /*id*/ 4 && {
 						"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1495,17 +1494,17 @@ function create_fragment(ctx) {
 					dirty[0] & /*id*/ 4 && {
 						"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
 					},
-					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 102 && {
-						"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0
+					dirty[0] & /*selectedIndex, hideDropdown, results, id*/ 78 && {
+						"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
 						? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[6]}`
 						: null
 					}
 				])
 			: {};
 
-			if (!updating_ref && dirty[0] & /*searchRef*/ 16) {
+			if (!updating_ref && dirty[0] & /*searchRef*/ 32) {
 				updating_ref = true;
-				search_changes.ref = /*searchRef*/ ctx[4];
+				search_changes.ref = /*searchRef*/ ctx[5];
 				add_flush_callback(() => updating_ref = false);
 			}
 
@@ -1517,11 +1516,11 @@ function create_fragment(ctx) {
 
 			search.$set(search_changes);
 
-			if (!/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0) {
+			if (/*showResults*/ ctx[7]) {
 				if (if_block0) {
 					if_block0.p(ctx, dirty);
 
-					if (dirty[0] & /*hideDropdown, results*/ 34) {
+					if (dirty[0] & /*showResults*/ 128) {
 						transition_in(if_block0, 1);
 					}
 				} else {
@@ -1540,11 +1539,11 @@ function create_fragment(ctx) {
 				check_outros();
 			}
 
-			if (/*$$slots*/ ctx[9]["no-results"] && !/*hideDropdown*/ ctx[5] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
+			if (/*$$slots*/ ctx[10]["no-results"] && !/*hideDropdown*/ ctx[3] && /*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*/ 547) {
+					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 1035) {
 						transition_in(if_block1, 1);
 					}
 				} else {
@@ -1575,8 +1574,8 @@ function create_fragment(ctx) {
 				attr(div, "aria-owns", div_aria_owns_value);
 			}
 
-			if (!current || dirty[0] & /*hideDropdown, results*/ 34 && div_aria_expanded_value !== (div_aria_expanded_value = !/*hideDropdown*/ ctx[5] && /*results*/ ctx[1].length > 0)) {
-				attr(div, "aria-expanded", div_aria_expanded_value);
+			if (!current || dirty[0] & /*showResults*/ 128) {
+				attr(div, "aria-expanded", /*showResults*/ ctx[7]);
 			}
 
 			if (!current || dirty[0] & /*id*/ 4 && div_id_value !== (div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"))) {
@@ -1605,7 +1604,7 @@ function create_fragment(ctx) {
 			destroy_component(search);
 			if (if_block0) if_block0.d();
 			if (if_block1) if_block1.d();
-			/*div_binding*/ ctx[37](null);
+			/*div_binding*/ ctx[38](null);
 			mounted = false;
 			dispose();
 		}
@@ -1615,6 +1614,7 @@ function create_fragment(ctx) {
 function instance($$self, $$props, $$invalidate) {
 	let options;
 	let resultsId;
+	let showResults;
 
 	const omit_props_names = [
 		"id","value","data","extract","disable","filter","autoselect","inputAfterSelect","results","focusAfterSelect","limit"
@@ -1647,7 +1647,7 @@ function instance($$self, $$props, $$invalidate) {
 		}
 
 		if (prevResults !== resultsId && !$$slots["no-results"]) {
-			$$invalidate(5, hideDropdown = results.length === 0);
+			$$invalidate(3, hideDropdown = results.length === 0);
 		}
 
 		prevResults = resultsId;
@@ -1671,7 +1671,7 @@ function instance($$self, $$props, $$invalidate) {
 
 		await tick();
 		if (focusAfterSelect) searchRef.focus();
-		$$invalidate(5, hideDropdown = true);
+		$$invalidate(3, hideDropdown = true);
 	}
 
 	/** @type {(direction: -1 | 1) => void} */
@@ -1698,13 +1698,13 @@ function instance($$self, $$props, $$invalidate) {
 
 	const click_handler = ({ target }) => {
 		if (!hideDropdown && comboboxRef && !comboboxRef.contains(target)) {
-			$$invalidate(5, hideDropdown = true);
+			$$invalidate(3, hideDropdown = true);
 		}
 	};
 
 	function search_ref_binding(value) {
 		searchRef = value;
-		$$invalidate(4, searchRef);
+		$$invalidate(5, searchRef);
 	}
 
 	function search_value_binding(value$1) {
@@ -1729,7 +1729,7 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	const focus_handler_1 = () => {
-		$$invalidate(5, hideDropdown = false);
+		$$invalidate(3, hideDropdown = false);
 	};
 
 	function clear_handler(event) {
@@ -1737,7 +1737,7 @@ function instance($$self, $$props, $$invalidate) {
 	}
 
 	const clear_handler_1 = () => {
-		$$invalidate(5, hideDropdown = false);
+		$$invalidate(3, hideDropdown = false);
 	};
 
 	function blur_handler(event) {
@@ -1767,72 +1767,76 @@ function instance($$self, $$props, $$invalidate) {
 				e.preventDefault();
 				$$invalidate(0, value = "");
 				searchRef.focus();
-				$$invalidate(5, hideDropdown = true);
+				$$invalidate(3, hideDropdown = true);
 				break;
 		}
 	};
 
-	const click_handler_1 = (result, i) => {
-		if (!result.disabled) {
-			$$invalidate(6, selectedIndex = i);
-			select();
-		}
+	const click_handler_1 = (result, index) => {
+		if (result.disabled) return;
+		$$invalidate(6, selectedIndex = index);
+		select();
 	};
 
-	const mouseenter_handler = (result, i) => {
+	const mouseenter_handler = (result, index) => {
 		if (result.disabled) return;
-		$$invalidate(6, selectedIndex = i);
+		$$invalidate(6, selectedIndex = index);
 	};
 
 	function div_binding($$value) {
 		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
 			comboboxRef = $$value;
-			$$invalidate(3, comboboxRef);
+			$$invalidate(4, comboboxRef);
 		});
 	}
 
 	$$self.$$set = $$new_props => {
 		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-		$$invalidate(10, $$restProps = compute_rest_props($$props, omit_props_names));
+		$$invalidate(11, $$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(11, data = $$new_props.data);
-		if ('extract' in $$new_props) $$invalidate(12, extract = $$new_props.extract);
-		if ('disable' in $$new_props) $$invalidate(13, disable = $$new_props.disable);
-		if ('filter' in $$new_props) $$invalidate(14, filter = $$new_props.filter);
-		if ('autoselect' in $$new_props) $$invalidate(15, autoselect = $$new_props.autoselect);
-		if ('inputAfterSelect' in $$new_props) $$invalidate(16, inputAfterSelect = $$new_props.inputAfterSelect);
+		if ('data' in $$new_props) $$invalidate(12, data = $$new_props.data);
+		if ('extract' in $$new_props) $$invalidate(13, extract = $$new_props.extract);
+		if ('disable' in $$new_props) $$invalidate(14, disable = $$new_props.disable);
+		if ('filter' in $$new_props) $$invalidate(15, filter = $$new_props.filter);
+		if ('autoselect' in $$new_props) $$invalidate(16, autoselect = $$new_props.autoselect);
+		if ('inputAfterSelect' in $$new_props) $$invalidate(17, inputAfterSelect = $$new_props.inputAfterSelect);
 		if ('results' in $$new_props) $$invalidate(1, results = $$new_props.results);
-		if ('focusAfterSelect' in $$new_props) $$invalidate(17, focusAfterSelect = $$new_props.focusAfterSelect);
-		if ('limit' in $$new_props) $$invalidate(18, limit = $$new_props.limit);
-		if ('$$scope' in $$new_props) $$invalidate(20, $$scope = $$new_props.$$scope);
+		if ('focusAfterSelect' in $$new_props) $$invalidate(18, focusAfterSelect = $$new_props.focusAfterSelect);
+		if ('limit' in $$new_props) $$invalidate(19, limit = $$new_props.limit);
+		if ('$$scope' in $$new_props) $$invalidate(21, $$scope = $$new_props.$$scope);
 	};
 
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty[0] & /*extract*/ 4096) {
-			$$invalidate(19, options = { pre: "<mark>", post: "</mark>", extract });
+		if ($$self.$$.dirty[0] & /*extract*/ 8192) {
+			$$invalidate(20, options = { pre: "<mark>", post: "</mark>", extract });
 		}
 
-		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 813057) {
+		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 1626113) {
 			$$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*/ 4098) {
+		if ($$self.$$.dirty[0] & /*results, extract*/ 8194) {
 			resultsId = results.map(result => extract(result.original)).join("");
 		}
+
+		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 10) {
+			$$invalidate(7, showResults = !hideDropdown && results.length > 0);
+		}
 	};
 
 	return [
 		value,
 		results,
 		id,
+		hideDropdown,
 		comboboxRef,
 		searchRef,
-		hideDropdown,
 		selectedIndex,
+		showResults,
 		select,
 		change,
 		$$slots,
@@ -1880,15 +1884,15 @@ class Typeahead extends SvelteComponent {
 			{
 				id: 2,
 				value: 0,
-				data: 11,
-				extract: 12,
-				disable: 13,
-				filter: 14,
-				autoselect: 15,
-				inputAfterSelect: 16,
+				data: 12,
+				extract: 13,
+				disable: 14,
+				filter: 15,
+				autoselect: 16,
+				inputAfterSelect: 17,
 				results: 1,
-				focusAfterSelect: 17,
-				limit: 18
+				focusAfterSelect: 18,
+				limit: 19
 			},
 			add_css,
 			[-1, -1]

package/package.json

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

package/src/Typeahead.svelte

@@ -92,7 +92,9 @@
   /** @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;
@@ -118,6 +120,7 @@
     .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;
 </script>
 
 <svelte:window
@@ -135,7 +138,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
@@ -195,26 +198,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 = i;
+            selectedIndex = index;
           }}
         >
-          <slot {result} index={i} {value}>
+          <slot {result} {index} {value}>
             {@html result.string}
           </slot>
         </li>
@@ -245,6 +247,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;