OpenNeo/impress-2020
OpenNeo/impress-2020
1
0
Fork 0
Code Pull requests Activity

Leave search suggestions open on blur

Browse source 
Someone wrote in how, when your search query ends with a string that creates Advanced Search suggestions, clicking on items in the list requires two clicks: one to blur and dismiss the suggestions, and one to actually click the item.

Here, I'm experimenting with just leaving the suggestions open. It doesn't feel _great_, but it definitely feels _better_ than before on this edge case, and I thiiink this only affects this edge case in practice? We'll see if it feels goofy in some cases I forgot tho!
This commit is contained in:
Emi Matchu 2021-01-19 14:27:55 -08:00
parent 94efb80e65
commit 0333b47c05
1 changed files with 86 additions and 91 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/app/WardrobePage/SearchToolbar.js
View file

@ -142,25 +142,22 @@ function SearchToolbar({
const focusBorderColor = useColorModeValue("green.600", "green.400"); const focusBorderColor = useColorModeValue("green.600", "green.400");
return ( return (
<ClassNames>
{({ css }) => (
<Autosuggest <Autosuggest
suggestions={suggestions} suggestions={suggestions}
onSuggestionsFetchRequested={({ value }) => onSuggestionsFetchRequested={({ value }) =>
setSuggestions(getSuggestions(value, query, zoneLabels)) setSuggestions(getSuggestions(value, query, zoneLabels))
} }
onSuggestionsClearRequested={() => setSuggestions([])}
onSuggestionSelected={(e, { suggestion }) => { onSuggestionSelected={(e, { suggestion }) => {
const valueWithoutLastWord = query.value.match(/^(.*?)\s*\S+$/)[1]; const valueWithoutLastWord = query.value.match(/^(.*?)\s*\S+$/)[1];
onChange({ onChange({
...query, ...query,
value: valueWithoutLastWord, value: valueWithoutLastWord,
filterToZoneLabel: filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel,
suggestion.zoneLabel || query.filterToZoneLabel,
filterToItemKind: suggestion.itemKind || query.filterToItemKind, filterToItemKind: suggestion.itemKind || query.filterToItemKind,
}); });
}} }}
getSuggestionValue={(zl) => zl} getSuggestionValue={(zl) => zl}
alwaysRenderSuggestions={true}
highlightFirstSuggestion={true} highlightFirstSuggestion={true}
renderSuggestion={renderSuggestion} renderSuggestion={renderSuggestion}
renderSuggestionsContainer={renderSuggestionsContainer} renderSuggestionsContainer={renderSuggestionsContainer}
@ -185,7 +182,10 @@ function SearchToolbar({
variant="ghost" variant="ghost"
colorScheme="green" colorScheme="green"
aria-label="Clear search" aria-label="Clear search"
onClick={() => onChange(emptySearchQuery)} onClick={() => {
setSuggestions([]);
onChange(emptySearchQuery);
}}
// Big style hacks here! // Big style hacks here!
height="calc(100% - 2px)" height="calc(100% - 2px)"
marginRight="2px" marginRight="2px"
@ -222,10 +222,7 @@ function SearchToolbar({
return; return;
} }
onMoveFocusDownToResults(e); onMoveFocusDownToResults(e);
} else if ( } else if (e.key === "Backspace" && e.target.selectionStart === 0) {
e.key === "Backspace" &&
e.target.selectionStart === 0
) {
onChange({ onChange({
...query, ...query,
filterToItemKind: null, filterToItemKind: null,
@ -235,8 +232,6 @@ function SearchToolbar({
}, },
}} }}
/> />
)}
</ClassNames>
); );
} }