diff --git a/README.md b/README.md
index 9a9eb62..10cb7d0 100644
--- a/README.md
+++ b/README.md
@@ -139,23 +139,34 @@ Set `focusAfterSelect` to `true` to re-focus the search input after selecting a
```
+### Show dropdown on focus
+
+By default, the dropdown will be shown if the `value` has results.
+
+Set `showDropdownOnFocus` to `true` to only show the dropdown when the search input is focused.
+
+```svelte
+
+```
+
## API
### Props
-| Prop name | Value | Description |
-| :--------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
-| value | `string` (default: `""`) | Input search value |
-| data | `TItem[]` (default: `[]`) | Items to search |
-| extract | `(TItem) => any` | Target an item key if `data` is an object array |
-| disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
-| filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
-| autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
-| inputAfterSelect | `"update" or "clear" or "keep"`(default: `"update"`) | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
-| results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
-| focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
-| limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
-| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |
+| Prop name | Value | Description |
+| :----------------- | :------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------ |
+| value | `string` (default: `""`) | Input search value |
+| data | `TItem[]` (default: `[]`) | Items to search |
+| extract | `(TItem) => any` | Target an item key if `data` is an object array |
+| disable | `(TItem) => boolean` | Pass in a function to disable items. They can be displayed in the results but will not be selectable. |
+| filter | `(TItem) => boolean` | Pass in a function to filter items. They will be hidden and are not displayed in the results. |
+| autoselect | `boolean` (default: `true`) | Automatically select the first (top) result |
+| inputAfterSelect | `"update" or "clear" or "keep"`(default: `"update"`) | Set to `"clear"` to clear the `value` after selecting a result. Set to `"keep"` to keep the search field unchanged after a selection. |
+| results | `FuzzyResult[]` (default: `[]`) | Raw fuzzy results from the [fuzzy](https://github.com/mattyork/fuzzy) module |
+| focusAfterSelect | `boolean` (default: `false`) | Set to `true` to re-focus the input after selecting a result. |
+| showDropdownOnFocus | `boolean` (default: `false`) | Set to `true` to only show results when the input is focused. |
+| limit | `number` (default: `Infinity`) | Specify the maximum number of results to display. |
+| `...$$restProps` | (forwarded to [`svelte-search`](https://github.com/metonym/svelte-search)) | All other props are forwarded to the input element. |
### Dispatched events
diff --git a/src/Typeahead.svelte b/src/Typeahead.svelte
index 2fb8550..497c10a 100644
--- a/src/Typeahead.svelte
+++ b/src/Typeahead.svelte
@@ -33,6 +33,9 @@
/** Set to `true` to re-focus the input after selecting a result */
export let focusAfterSelect = false;
+ /** Set to `true` to only show results when the input is focused */
+ export let showDropdownOnFocus = false;
+
/**
* Specify the maximum number of results to return
* @type {number}
@@ -50,6 +53,7 @@
let hideDropdown = false;
let selectedIndex = -1;
let prevResults = "";
+ let isFocused = false;
afterUpdate(() => {
if (prevResults !== resultsId && autoselect) {
@@ -123,6 +127,9 @@
.map((result) => ({ ...result, disabled: disable(result.original) }));
$: resultsId = results.map((result) => extract(result.original)).join("");
$: showResults = !hideDropdown && results.length > 0;
+ $: if (showDropdownOnFocus) {
+ showResults = showResults && isFocused;
+ }
{
+ open();
+ isFocused = true;
+ }}
on:clear
on:clear={open}
on:blur
+ on:blur={() => {
+ isFocused = false;
+ }}
on:keydown
on:keydown={(e) => {
if (results.length === 0) return;
diff --git a/types/Typeahead.svelte.d.ts b/types/Typeahead.svelte.d.ts
index aac3aa9..68656a3 100644
--- a/types/Typeahead.svelte.d.ts
+++ b/types/Typeahead.svelte.d.ts
@@ -62,6 +62,12 @@ export interface TypeaheadProps extends SearchProps {
*/
focusAfterSelect?: boolean;
+ /**
+ * Set to `true` to only show results when the input is focused
+ * @default false
+ */
+ showDropdownOnFocus?: boolean;
+
/**
* Specify the maximum number of results to return
* @default Infinity