From 0333b47c05bd0d26484d7746e1df7d892ed61622 Mon Sep 17 00:00:00 2001 From: Matchu Date: Tue, 19 Jan 2021 14:27:55 -0800 Subject: [PATCH] Leave search suggestions open on blur 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! --- src/app/WardrobePage/SearchToolbar.js | 177 +++++++++++++------------- 1 file changed, 86 insertions(+), 91 deletions(-) diff --git a/src/app/WardrobePage/SearchToolbar.js b/src/app/WardrobePage/SearchToolbar.js index edacca6..267953a 100644 --- a/src/app/WardrobePage/SearchToolbar.js +++ b/src/app/WardrobePage/SearchToolbar.js @@ -142,101 +142,96 @@ function SearchToolbar({ const focusBorderColor = useColorModeValue("green.600", "green.400"); return ( - - {({ css }) => ( - - setSuggestions(getSuggestions(value, query, zoneLabels)) + + setSuggestions(getSuggestions(value, query, zoneLabels)) + } + onSuggestionSelected={(e, { suggestion }) => { + const valueWithoutLastWord = query.value.match(/^(.*?)\s*\S+$/)[1]; + onChange({ + ...query, + value: valueWithoutLastWord, + filterToZoneLabel: suggestion.zoneLabel || query.filterToZoneLabel, + filterToItemKind: suggestion.itemKind || query.filterToItemKind, + }); + }} + getSuggestionValue={(zl) => zl} + alwaysRenderSuggestions={true} + highlightFirstSuggestion={true} + renderSuggestion={renderSuggestion} + renderSuggestionsContainer={renderSuggestionsContainer} + renderInputComponent={(inputProps) => ( + + {queryFilterText ? ( + + + {queryFilterText} + + ) : ( + + + + )} + + {(query.value || queryFilterText) && ( + + } + color="gray.400" + variant="ghost" + colorScheme="green" + aria-label="Clear search" + onClick={() => { + setSuggestions([]); + onChange(emptySearchQuery); + }} + // Big style hacks here! + height="calc(100% - 2px)" + marginRight="2px" + /> + + )} + + )} + inputProps={{ + // placeholder: "Search for items to add…", + "aria-label": "Search for items to add…", + focusBorderColor: focusBorderColor, + value: query.value || "", + ref: searchQueryRef, + minWidth: 0, + onChange: (e, { newValue, method }) => { + // The Autosuggest tries to change the _entire_ value of the element + // when navigating suggestions, which isn't actually what we want. + // Only accept value changes that are typed by the user! + if (method === "type") { + onChange({ ...query, value: newValue }); } - onSuggestionsClearRequested={() => setSuggestions([])} - onSuggestionSelected={(e, { suggestion }) => { - const valueWithoutLastWord = query.value.match(/^(.*?)\s*\S+$/)[1]; + }, + onKeyDown: (e) => { + if (e.key === "Escape") { + if (suggestions.length > 0) { + setSuggestions([]); + return; + } + onChange(null); + e.target.blur(); + } else if (e.key === "ArrowDown") { + if (suggestions.length > 0) { + return; + } + onMoveFocusDownToResults(e); + } else if (e.key === "Backspace" && e.target.selectionStart === 0) { onChange({ ...query, - value: valueWithoutLastWord, - filterToZoneLabel: - suggestion.zoneLabel || query.filterToZoneLabel, - filterToItemKind: suggestion.itemKind || query.filterToItemKind, + filterToItemKind: null, + filterToZoneLabel: null, }); - }} - getSuggestionValue={(zl) => zl} - highlightFirstSuggestion={true} - renderSuggestion={renderSuggestion} - renderSuggestionsContainer={renderSuggestionsContainer} - renderInputComponent={(inputProps) => ( - - {queryFilterText ? ( - - - {queryFilterText} - - ) : ( - - - - )} - - {(query.value || queryFilterText) && ( - - } - color="gray.400" - variant="ghost" - colorScheme="green" - aria-label="Clear search" - onClick={() => onChange(emptySearchQuery)} - // Big style hacks here! - height="calc(100% - 2px)" - marginRight="2px" - /> - - )} - - )} - inputProps={{ - // placeholder: "Search for items to add…", - "aria-label": "Search for items to add…", - focusBorderColor: focusBorderColor, - value: query.value || "", - ref: searchQueryRef, - minWidth: 0, - onChange: (e, { newValue, method }) => { - // The Autosuggest tries to change the _entire_ value of the element - // when navigating suggestions, which isn't actually what we want. - // Only accept value changes that are typed by the user! - if (method === "type") { - onChange({ ...query, value: newValue }); - } - }, - onKeyDown: (e) => { - if (e.key === "Escape") { - if (suggestions.length > 0) { - setSuggestions([]); - return; - } - onChange(null); - e.target.blur(); - } else if (e.key === "ArrowDown") { - if (suggestions.length > 0) { - return; - } - onMoveFocusDownToResults(e); - } else if ( - e.key === "Backspace" && - e.target.selectionStart === 0 - ) { - onChange({ - ...query, - filterToItemKind: null, - filterToZoneLabel: null, - }); - } - }, - }} - /> - )} - + } + }, + }} + /> ); }