Updating the `value` prop opens the dropdown without being focused

[Prinzhorn]

Related to #95

See https://svelte.dev/playground/eb64b1194696420697578f82206cd8a2?version=5.44.0

The results should never show when the input doesn't have focus. I have multiple Typeahead that depends on other (you drill down into data). When the next Typeahead would only have a single entry, I automatically set the value to that data and my internal state to that item so that the user can skip to the second next Typeahead. The current behavior makes it so that selecting an item at the top might open one or even multiple Typeahead's results with a single option further down below the form.

Is this desired behavior?

[metonym]

Thanks for providing a REPL. Does setting showDropdownOnFocus for your use case? In the example below, I adapted your REPL to have two instances, and also a button to programmatically update the bound value. Updating the values do not open the menu.

From a DX standpoint, I agree that the behavior should be inverted (showDropdownOnFocus should be the default without explicit setting). Spun up a PR here: #100

<script>
	import { onMount } from 'svelte';
  import Typeahead from "svelte-typeahead";
  import data from "./states.js";
	
	let events = [];
	let value = '';
	let value2 = '';

	onMount(() => {
		setTimeout(() => {
			value = 'ca'
			value2 = 'cad'
		}, 1000);
	});
</script>

<button on:click={() => {value +='c'}}>Update</button>

<Typeahead
	showDropdownOnFocus
	label="U.S. States"
  placeholder={`Search U.S. states (e.g. "California")`}
  {data}
  extract={(item) => item.state}
  disable={(item) => /Carolina/.test(item.state)}
	value={value}
  on:select={({ detail }) => events = [...events, detail]}
	on:clear={() => events = [...events, "clear"]}
/>

<Typeahead
	showDropdownOnFocus
	label="U.S. States"
  placeholder={`Search U.S. states (e.g. "California")`}
  {data}
  extract={(item) => item.state}
  disable={(item) => /Carolina/.test(item.state)}
	value={value2}
  on:select={({ detail }) => events = [...events, detail]}
	on:clear={() => events = [...events, "clear"]}
/>

<pre>{JSON.stringify(events, null, 2)}</pre>

<style>:global(input) { margin: 0; }</style>

[Prinzhorn]

Thanks for providing a REPL. Does setting showDropdownOnFocus for your use case?

No, because it breaks the results list, see video in #98

There are two separate problems here:

1. The showDropdownOnFocus is broken and instead of "only show results when the input is focused." it is "only open the results once when the input is initially focused". The results won't open ever again, as seen in showDropdownOnFocus breaks suggestions #98. Maybe you originally intended it to behave like a showDropdownOnlyWhenFocused? Which should always be true, as you said in your PR.
2. A different option that does "Open the results when the input is initially focused". But actually that's already the case, unless the input is empty. So maybe we need an option showResultsWhenInputIsEmpty? Because that's what I actually want. So that it always behaves like a normal <select> when the input is empty.

I believe it would make sense to create a table and map out all possible states and think about how it should behave and what parts should be configurable. This table could then also be part of the docs.

[metonym]

Got it. I appreciate the feedback.

1. I'll take a look at showDropdownOnFocus breaks suggestions #98
2. There's the showAllResultsOnFocus prop which does what you describe (see video below). However, it highlights the original issue you ran into; the menu is reactive based on value, and from a UX standpoint, makes more sense to default to opening on input focus.

---

show-results-on-input-focus.mov