Don't auto-select the first item search filter

There have been usability problems with this search filter UI, and I think they mostly come down to people accidentally selecting filters when they don't mean to—sometimes pressing Enter to indicate that they're done typing, but accidentally selecting something.

Here, we remove that behavior, and additionally add a new behavior to clear the suggestions on pressing Enter.
This commit is contained in:
Emi Matchu 2021-05-12 23:08:54 -07:00
parent 9ea8245208
commit b521f79a13

View file

@ -208,7 +208,6 @@ function SearchToolbar({
}} }}
getSuggestionValue={(zl) => zl} getSuggestionValue={(zl) => zl}
alwaysRenderSuggestions={true} alwaysRenderSuggestions={true}
highlightFirstSuggestion={true}
renderSuggestion={renderSuggestion} renderSuggestion={renderSuggestion}
renderSuggestionsContainer={renderSuggestionsContainer} renderSuggestionsContainer={renderSuggestionsContainer}
renderInputComponent={(inputProps) => ( renderInputComponent={(inputProps) => (
@ -292,6 +291,14 @@ function SearchToolbar({
} }
onChange(emptySearchQuery); onChange(emptySearchQuery);
e.target.blur(); e.target.blur();
} else if (e.key === "Enter") {
// Pressing Enter doesn't actually submit because it's all on
// debounce, but it can be a declaration that the query is done, so
// filter suggestions should go away!
if (suggestions.length > 0) {
setSuggestions([]);
return;
}
} else if (e.key === "ArrowDown") { } else if (e.key === "ArrowDown") {
if (suggestions.length > 0) { if (suggestions.length > 0) {
return; return;