svelte-typeahead 4.2.4 → 4.3.0

package/lib/index.js

@@ -410,6 +410,9 @@
             });
             block.o(local);
         }
+        else if (callback) {
+            callback();
+        }
     }
 
     function get_spread_update(levels, updates) {
@@ -731,7 +734,7 @@
 
     var fuzzy = fuzzy$1.exports;
 
-    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.48.0 */
+    /* node_modules/svelte-search/src/Search.svelte generated by Svelte v3.49.0 */
 
     function add_css$1(target) {
     	append_styles(target, "svelte-5m0wg6", ".hide-label.svelte-5m0wg6{position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}");
@@ -1068,7 +1071,7 @@
 
     var Search$1 = Search;
 
-    /* src/Typeahead.svelte generated by Svelte v3.48.0 */
+    /* src/Typeahead.svelte generated by Svelte v3.49.0 */
 
     function add_css(target) {
     	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}");
@@ -1081,14 +1084,14 @@
 
     const get_no_results_slot_context = ctx => ({
     	value: /*value*/ ctx[0],
-    	result: /*result*/ ctx[42],
-    	index: /*index*/ ctx[44]
+    	result: /*result*/ ctx[46],
+    	index: /*index*/ ctx[48]
     });
 
     function get_each_context(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[42] = list[i];
-    	child_ctx[44] = i;
+    	child_ctx[46] = list[i];
+    	child_ctx[48] = i;
     	return child_ctx;
     }
 
@@ -1098,12 +1101,12 @@
     });
 
     const get_default_slot_context = ctx => ({
-    	result: /*result*/ ctx[42],
-    	index: /*index*/ ctx[44],
+    	result: /*result*/ ctx[46],
+    	index: /*index*/ ctx[48],
     	value: /*value*/ ctx[0]
     });
 
-    // (201:4) {#if showResults}
+    // (212:4) {#if showResults}
     function create_if_block_1(ctx) {
     	let each_1_anchor;
     	let current;
@@ -1135,7 +1138,7 @@
     			current = true;
     		},
     		p(ctx, dirty) {
-    			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 2097479) {
+    			if (dirty[0] & /*id, selectedIndex, results, select, $$scope, value*/ 33555207) {
     				each_value = /*results*/ ctx[1];
     				let i;
 
@@ -1187,10 +1190,10 @@
     	};
     }
 
-    // (219:41)              
+    // (230:41)              
     function fallback_block(ctx) {
     	let html_tag;
-    	let raw_value = /*result*/ ctx[42].string + "";
+    	let raw_value = /*result*/ ctx[46].string + "";
     	let html_anchor;
 
     	return {
@@ -1204,7 +1207,7 @@
     			insert(target, html_anchor, anchor);
     		},
     		p(ctx, dirty) {
-    			if (dirty[0] & /*results*/ 2 && raw_value !== (raw_value = /*result*/ ctx[42].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);
@@ -1213,7 +1216,7 @@
     	};
     }
 
-    // (202:6) {#each results as result, index}
+    // (213:6) {#each results as result, index}
     function create_each_block(ctx) {
     	let li;
     	let t;
@@ -1222,16 +1225,16 @@
     	let current;
     	let mounted;
     	let dispose;
-    	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_template = /*#slots*/ ctx[26].default;
+    	const default_slot = create_slot(default_slot_template, ctx, /*$$scope*/ ctx[25], get_default_slot_context);
     	const default_slot_or_fallback = default_slot || fallback_block(ctx);
 
     	function click_handler_1() {
-    		return /*click_handler_1*/ ctx[36](/*result*/ ctx[42], /*index*/ ctx[44]);
+    		return /*click_handler_1*/ ctx[40](/*result*/ ctx[46], /*index*/ ctx[48]);
     	}
 
     	function mouseenter_handler() {
-    		return /*mouseenter_handler*/ ctx[37](/*result*/ ctx[42], /*index*/ ctx[44]);
+    		return /*mouseenter_handler*/ ctx[41](/*result*/ ctx[46], /*index*/ ctx[48]);
     	}
 
     	return {
@@ -1240,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[44]));
-    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
+    			attr(li, "id", li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[48]));
+    			attr(li, "aria-selected", li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
     			attr(li, "class", "svelte-9wywte");
-    			toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
-    			toggle_class(li, "disabled", /*result*/ ctx[42].disabled);
+    			toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
+    			toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
     		},
     		m(target, anchor) {
     			insert(target, li, anchor);
@@ -1269,15 +1272,15 @@
     			ctx = new_ctx;
 
     			if (default_slot) {
-    				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 2097155)) {
+    				if (default_slot.p && (!current || dirty[0] & /*$$scope, results, value*/ 33554435)) {
     					update_slot_base(
     						default_slot,
     						default_slot_template,
     						ctx,
-    						/*$$scope*/ ctx[21],
+    						/*$$scope*/ ctx[25],
     						!current
-    						? get_all_dirty_from_scope(/*$$scope*/ ctx[21])
-    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[21], dirty, get_default_slot_changes),
+    						? get_all_dirty_from_scope(/*$$scope*/ ctx[25])
+    						: get_slot_changes(default_slot_template, /*$$scope*/ ctx[25], dirty, get_default_slot_changes),
     						get_default_slot_context
     					);
     				}
@@ -1287,20 +1290,20 @@
     				}
     			}
 
-    			if (!current || dirty[0] & /*id*/ 4 && li_id_value !== (li_id_value = "" + (/*id*/ ctx[2] + "-result-" + /*index*/ ctx[44]))) {
+    			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*/ 64 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[6] === /*index*/ ctx[44])) {
+    			if (!current || dirty[0] & /*selectedIndex*/ 256 && li_aria_selected_value !== (li_aria_selected_value = /*selectedIndex*/ ctx[8] === /*index*/ ctx[48])) {
     				attr(li, "aria-selected", li_aria_selected_value);
     			}
 
-    			if (dirty[0] & /*selectedIndex*/ 64) {
-    				toggle_class(li, "selected", /*selectedIndex*/ ctx[6] === /*index*/ ctx[44]);
+    			if (dirty[0] & /*selectedIndex*/ 256) {
+    				toggle_class(li, "selected", /*selectedIndex*/ ctx[8] === /*index*/ ctx[48]);
     			}
 
     			if (dirty[0] & /*results*/ 2) {
-    				toggle_class(li, "disabled", /*result*/ ctx[42].disabled);
+    				toggle_class(li, "disabled", /*result*/ ctx[46].disabled);
     			}
     		},
     		i(local) {
@@ -1321,12 +1324,12 @@
     	};
     }
 
-    // (225:4) {#if $$slots["no-results"] && !hideDropdown && value.length > 0 && results.length === 0}
+    // (236: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[22]["no-results"];
-    	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[21], get_no_results_slot_context);
+    	const no_results_slot_template = /*#slots*/ ctx[26]["no-results"];
+    	const no_results_slot = create_slot(no_results_slot_template, ctx, /*$$scope*/ ctx[25], get_no_results_slot_context);
 
     	return {
     		c() {
@@ -1346,15 +1349,15 @@
     		},
     		p(ctx, dirty) {
     			if (no_results_slot) {
-    				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 2097155)) {
+    				if (no_results_slot.p && (!current || dirty[0] & /*$$scope, value, results*/ 33554435)) {
     					update_slot_base(
     						no_results_slot,
     						no_results_slot_template,
     						ctx,
-    						/*$$scope*/ ctx[21],
+    						/*$$scope*/ ctx[25],
     						!current
-    						? 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_all_dirty_from_scope(/*$$scope*/ ctx[25])
+    						: get_slot_changes(no_results_slot_template, /*$$scope*/ ctx[25], dirty, get_no_results_slot_changes),
     						get_no_results_slot_context
     					);
     				}
@@ -1395,7 +1398,7 @@
     	const search_spread_levels = [
     		{ id: /*id*/ ctx[2] },
     		{ removeFormAriaAttributes: true },
-    		/*$$restProps*/ ctx[11],
+    		/*$$restProps*/ ctx[14],
     		{ "aria-autocomplete": "list" },
     		{
     			"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1404,18 +1407,18 @@
     			"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
     		},
     		{
-    			"aria-activedescendant": /*selectedIndex*/ ctx[6] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
-    			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[6]}`
+    			"aria-activedescendant": /*selectedIndex*/ ctx[8] >= 0 && !/*hideDropdown*/ ctx[3] && /*results*/ ctx[1].length > 0
+    			? `${/*id*/ ctx[2]}-result-${/*selectedIndex*/ ctx[8]}`
     			: null
     		}
     	];
 
     	function search_ref_binding(value) {
-    		/*search_ref_binding*/ ctx[24](value);
+    		/*search_ref_binding*/ ctx[28](value);
     	}
 
     	function search_value_binding(value) {
-    		/*search_value_binding*/ ctx[25](value);
+    		/*search_value_binding*/ ctx[29](value);
     	}
 
     	let search_props = {};
@@ -1424,8 +1427,8 @@
     		search_props = assign(search_props, search_spread_levels[i]);
     	}
 
-    	if (/*searchRef*/ ctx[5] !== void 0) {
-    		search_props.ref = /*searchRef*/ ctx[5];
+    	if (/*searchRef*/ ctx[7] !== void 0) {
+    		search_props.ref = /*searchRef*/ ctx[7];
     	}
 
     	if (/*value*/ ctx[0] !== void 0) {
@@ -1435,18 +1438,19 @@
     	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[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);
+    	search.$on("type", /*type_handler*/ ctx[30]);
+    	search.$on("input", /*input_handler*/ ctx[31]);
+    	search.$on("change", /*change_handler*/ ctx[32]);
+    	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("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);
 
     	return {
     		c() {
@@ -1466,7 +1470,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[7]);
+    			attr(div, "aria-expanded", /*showResults*/ ctx[5]);
     			attr(div, "id", div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"));
     			attr(div, "class", "svelte-9wywte");
     			toggle_class(div, "dropdown", /*results*/ ctx[1].length > 0);
@@ -1479,20 +1483,20 @@
     			if (if_block0) if_block0.m(ul, null);
     			append(ul, t1);
     			if (if_block1) if_block1.m(ul, null);
-    			/*div_binding*/ ctx[38](div);
+    			/*div_binding*/ ctx[42](div);
     			current = true;
 
     			if (!mounted) {
-    				dispose = listen(window, "click", /*click_handler*/ ctx[23]);
+    				dispose = listen(window, "click", /*click_handler*/ ctx[27]);
     				mounted = true;
     			}
     		},
     		p(ctx, dirty) {
-    			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 2126)
+    			const search_changes = (dirty[0] & /*id, $$restProps, selectedIndex, hideDropdown, results*/ 16654)
     			? get_spread_update(search_spread_levels, [
     					dirty[0] & /*id*/ 4 && { id: /*id*/ ctx[2] },
     					search_spread_levels[1],
-    					dirty[0] & /*$$restProps*/ 2048 && get_spread_object(/*$$restProps*/ ctx[11]),
+    					dirty[0] & /*$$restProps*/ 16384 && get_spread_object(/*$$restProps*/ ctx[14]),
     					search_spread_levels[3],
     					dirty[0] & /*id*/ 4 && {
     						"aria-controls": "" + (/*id*/ ctx[2] + "-listbox")
@@ -1500,17 +1504,17 @@
     					dirty[0] & /*id*/ 4 && {
     						"aria-labelledby": "" + (/*id*/ ctx[2] + "-label")
     					},
-    					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]}`
+    					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]}`
     						: null
     					}
     				])
     			: {};
 
-    			if (!updating_ref && dirty[0] & /*searchRef*/ 32) {
+    			if (!updating_ref && dirty[0] & /*searchRef*/ 128) {
     				updating_ref = true;
-    				search_changes.ref = /*searchRef*/ ctx[5];
+    				search_changes.ref = /*searchRef*/ ctx[7];
     				add_flush_callback(() => updating_ref = false);
     			}
 
@@ -1522,11 +1526,11 @@
 
     			search.$set(search_changes);
 
-    			if (/*showResults*/ ctx[7]) {
+    			if (/*showResults*/ ctx[5]) {
     				if (if_block0) {
     					if_block0.p(ctx, dirty);
 
-    					if (dirty[0] & /*showResults*/ 128) {
+    					if (dirty[0] & /*showResults*/ 32) {
     						transition_in(if_block0, 1);
     					}
     				} else {
@@ -1545,11 +1549,11 @@
     				check_outros();
     			}
 
-    			if (/*$$slots*/ ctx[10]["no-results"] && !/*hideDropdown*/ ctx[3] && /*value*/ ctx[0].length > 0 && /*results*/ ctx[1].length === 0) {
+    			if (/*$$slots*/ ctx[13]["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*/ 1035) {
+    					if (dirty[0] & /*$$slots, hideDropdown, value, results*/ 8203) {
     						transition_in(if_block1, 1);
     					}
     				} else {
@@ -1580,8 +1584,8 @@
     				attr(div, "aria-owns", div_aria_owns_value);
     			}
 
-    			if (!current || dirty[0] & /*showResults*/ 128) {
-    				attr(div, "aria-expanded", /*showResults*/ ctx[7]);
+    			if (!current || dirty[0] & /*showResults*/ 32) {
+    				attr(div, "aria-expanded", /*showResults*/ ctx[5]);
     			}
 
     			if (!current || dirty[0] & /*id*/ 4 && div_id_value !== (div_id_value = "" + (/*id*/ ctx[2] + "-typeahead"))) {
@@ -1610,7 +1614,7 @@
     			destroy_component(search);
     			if (if_block0) if_block0.d();
     			if (if_block1) if_block1.d();
-    			/*div_binding*/ ctx[38](null);
+    			/*div_binding*/ ctx[42](null);
     			mounted = false;
     			dispose();
     		}
@@ -1623,7 +1627,7 @@
     	let showResults;
 
     	const omit_props_names = [
-    		"id","value","data","extract","disable","filter","autoselect","inputAfterSelect","results","focusAfterSelect","limit"
+    		"id","value","data","extract","disable","filter","autoselect","inputAfterSelect","results","focusAfterSelect","showDropdownOnFocus","limit"
     	];
 
     	let $$restProps = compute_rest_props($$props, omit_props_names);
@@ -1639,6 +1643,7 @@
     	let { inputAfterSelect = "update" } = $$props;
     	let { results = [] } = $$props;
     	let { focusAfterSelect = false } = $$props;
+    	let { showDropdownOnFocus = false } = $$props;
     	let { limit = Infinity } = $$props;
     	const dispatch = createEventDispatcher();
     	let comboboxRef = null;
@@ -1646,10 +1651,11 @@
     	let hideDropdown = false;
     	let selectedIndex = -1;
     	let prevResults = "";
+    	let isFocused = false;
 
     	afterUpdate(() => {
     		if (prevResults !== resultsId && autoselect) {
-    			$$invalidate(6, selectedIndex = 0);
+    			$$invalidate(8, selectedIndex = 0);
     		}
 
     		if (prevResults !== resultsId && !$$slots["no-results"]) {
@@ -1677,7 +1683,7 @@
 
     		await tick();
     		if (focusAfterSelect) searchRef.focus();
-    		$$invalidate(3, hideDropdown = true);
+    		close();
     	}
 
     	/** @type {(direction: -1 | 1) => void} */
@@ -1699,18 +1705,21 @@
     			disabled = results[index].disabled;
     		}
 
-    		$$invalidate(6, selectedIndex = index);
+    		$$invalidate(8, selectedIndex = index);
     	}
 
+    	const open = () => $$invalidate(3, hideDropdown = false);
+    	const close = () => $$invalidate(3, hideDropdown = true);
+
     	const click_handler = ({ target }) => {
-    		if (!hideDropdown && comboboxRef && !comboboxRef.contains(target)) {
-    			$$invalidate(3, hideDropdown = true);
+    		if (!hideDropdown && !comboboxRef?.contains(target)) {
+    			close();
     		}
     	};
 
     	function search_ref_binding(value) {
     		searchRef = value;
-    		$$invalidate(5, searchRef);
+    		$$invalidate(7, searchRef);
     	}
 
     	function search_value_binding(value$1) {
@@ -1735,21 +1744,22 @@
     	}
 
     	const focus_handler_1 = () => {
-    		$$invalidate(3, hideDropdown = false);
+    		open();
+    		$$invalidate(4, isFocused = true);
     	};
 
     	function clear_handler(event) {
     		bubble.call(this, $$self, event);
     	}
 
-    	const clear_handler_1 = () => {
-    		$$invalidate(3, hideDropdown = false);
-    	};
-
     	function blur_handler(event) {
     		bubble.call(this, $$self, event);
     	}
 
+    	const blur_handler_1 = () => {
+    		$$invalidate(4, isFocused = false);
+    	};
+
     	function keydown_handler(event) {
     		bubble.call(this, $$self, event);
     	}
@@ -1772,65 +1782,72 @@
     			case "Escape":
     				e.preventDefault();
     				$$invalidate(0, value = "");
-    				searchRef.focus();
-    				$$invalidate(3, hideDropdown = true);
+    				searchRef?.focus();
+    				close();
     				break;
     		}
     	};
 
     	const click_handler_1 = (result, index) => {
     		if (result.disabled) return;
-    		$$invalidate(6, selectedIndex = index);
+    		$$invalidate(8, selectedIndex = index);
     		select();
     	};
 
     	const mouseenter_handler = (result, index) => {
     		if (result.disabled) return;
-    		$$invalidate(6, selectedIndex = index);
+    		$$invalidate(8, selectedIndex = index);
     	};
 
     	function div_binding($$value) {
     		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
     			comboboxRef = $$value;
-    			$$invalidate(4, comboboxRef);
+    			$$invalidate(6, comboboxRef);
     		});
     	}
 
     	$$self.$$set = $$new_props => {
     		$$props = assign(assign({}, $$props), exclude_internal_props($$new_props));
-    		$$invalidate(11, $$restProps = compute_rest_props($$props, omit_props_names));
+    		$$invalidate(14, $$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(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 ('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 ('results' in $$new_props) $$invalidate(1, results = $$new_props.results);
-    		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);
+    		if ('focusAfterSelect' in $$new_props) $$invalidate(21, focusAfterSelect = $$new_props.focusAfterSelect);
+    		if ('showDropdownOnFocus' in $$new_props) $$invalidate(22, 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*/ 8192) {
-    			$$invalidate(20, options = { pre: "<mark>", post: "</mark>", extract });
+    		if ($$self.$$.dirty[0] & /*extract*/ 65536) {
+    			$$invalidate(24, options = { pre: "<mark>", post: "</mark>", extract });
     		}
 
-    		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 1626113) {
+    		if ($$self.$$.dirty[0] & /*value, data, options, limit, filter, disable*/ 25591809) {
     			$$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*/ 8194) {
+    		if ($$self.$$.dirty[0] & /*results, extract*/ 65538) {
     			resultsId = results.map(result => extract(result.original)).join("");
     		}
 
     		if ($$self.$$.dirty[0] & /*hideDropdown, results*/ 10) {
-    			$$invalidate(7, showResults = !hideDropdown && results.length > 0);
+    			$$invalidate(5, showResults = !hideDropdown && results.length > 0);
+    		}
+
+    		if ($$self.$$.dirty[0] & /*showDropdownOnFocus, showResults, isFocused*/ 4194352) {
+    			if (showDropdownOnFocus) {
+    				$$invalidate(5, showResults = showResults && isFocused);
+    			}
     		}
     	};
 
@@ -1839,12 +1856,15 @@
     		results,
     		id,
     		hideDropdown,
+    		isFocused,
+    		showResults,
     		comboboxRef,
     		searchRef,
     		selectedIndex,
-    		showResults,
     		select,
     		change,
+    		open,
+    		close,
     		$$slots,
     		$$restProps,
     		data,
@@ -1854,6 +1874,7 @@
     		autoselect,
     		inputAfterSelect,
     		focusAfterSelect,
+    		showDropdownOnFocus,
     		limit,
     		options,
     		$$scope,
@@ -1867,8 +1888,8 @@
     		focus_handler,
     		focus_handler_1,
     		clear_handler,
-    		clear_handler_1,
     		blur_handler,
+    		blur_handler_1,
     		keydown_handler,
     		keydown_handler_1,
     		click_handler_1,
@@ -1890,15 +1911,16 @@
     			{
     				id: 2,
     				value: 0,
-    				data: 12,
-    				extract: 13,
-    				disable: 14,
-    				filter: 15,
-    				autoselect: 16,
-    				inputAfterSelect: 17,
+    				data: 15,
+    				extract: 16,
+    				disable: 17,
+    				filter: 18,
+    				autoselect: 19,
+    				inputAfterSelect: 20,
     				results: 1,
-    				focusAfterSelect: 18,
-    				limit: 19
+    				focusAfterSelect: 21,
+    				showDropdownOnFocus: 22,
+    				limit: 23
     			},
     			add_css,
     			[-1, -1]