svelte-typeahead icon indicating copy to clipboard operation
svelte-typeahead copied to clipboard

fix: only show dropdown when focusing input

Open metonym opened this issue 1 month ago • 0 comments

Fixes #99

Currently, Typeahead results would display even when the input field doesn't have focus (reacting to value changes). This was particularly problematic in scenarios with dependent Typeahead components where values are set programmatically. When a parent Typeahead selection automatically populated a child Typeahead with a single matching result, that result would incorrectly display even though the user hadn't interacted with the child input.

From a UX standpoint, it makes sense to only show results when the current input is focused. This, however, renders the current showDropdownOnFocus a no-op. It may need to be inverted (e.g., show menu if input has value).

// Before: results could show without focus
$: showResults = !hideDropdown && results.length > 0;
$: if (showDropdownOnFocus) {
  showResults = showResults && isFocused;
}

// After: results always require focus
$: showResults = !hideDropdown && results.length > 0 && isFocused;

This ensures results only appear when users are actively interacting with the input, preventing unwanted dropdown displays in programmatic usage scenarios.

metonym avatar Nov 25 '25 13:11 metonym