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:
parent
9ea8245208
commit
b521f79a13
1 changed files with 8 additions and 1 deletions
|
@ -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;
|
||||||
|
|
Loading…
Reference in a new issue