[Q] How to pre-select a value without the dropdown showing?

[dominikus]

Hi all,

is it possible to pre-select a value on mount without the dropdown showing?

I'm binding a value variable to the component which I set to an item from the data array on mount. The value shows up in the search box (good!), but unfortunately the dropdown is open as well, showing exactly one result (not so good!):

Is there any way to prevent this from happening?

// rough code:
let value = 'UNITED STATES';
...
<Typeahead autoselect data={countries} {extract} bind:value />

[metonym]

This is supported in v4.3.0.

Set showDropdownOnFocus to true for the results dropdown to only be shown if the search input is focused. I believe this addresses your use case where an initial value is desired without obtrusively showing the dropdown.

Svelte REPL

<Typeahead value="ca" showDropdownOnFocus {data} {extract} />

[dominikus]

Brilliant, thank you!