From b521f79a139d0b6c30203187bb5f06c48066cb0d Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Wed, 12 May 2021 23:08:54 -0700
Subject: [PATCH] Don't auto-select the first item search filter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/app/WardrobePage/SearchToolbar.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/WardrobePage/SearchToolbar.js b/src/app/WardrobePage/SearchToolbar.js
index 1641eb8..46e53ab 100644
--- a/src/app/WardrobePage/SearchToolbar.js
+++ b/src/app/WardrobePage/SearchToolbar.js
@@ -208,7 +208,6 @@ function SearchToolbar({
       }}
       getSuggestionValue={(zl) => zl}
       alwaysRenderSuggestions={true}
-      highlightFirstSuggestion={true}
       renderSuggestion={renderSuggestion}
       renderSuggestionsContainer={renderSuggestionsContainer}
       renderInputComponent={(inputProps) => (
@@ -292,6 +291,14 @@ function SearchToolbar({
             }
             onChange(emptySearchQuery);
             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") {
             if (suggestions.length > 0) {
               return;