misc zone search fixes & improvements

src/app/WardrobePage/ItemsAndSearchPanels.js

@@ -4,6 +4,9 @@ import { Box, Flex } from "@chakra-ui/core";
 import ItemsPanel from "./ItemsPanel";
 import SearchToolbar from "./SearchToolbar";
 import SearchPanel from "./SearchPanel";
+import { isNullableType } from "graphql";
+
+const emptyQuery = { value: "", filterToZoneLabel: null };
 
 /**
  * ItemsAndSearchPanels manages the shared layout and state for:
@@ -19,11 +22,16 @@ import SearchPanel from "./SearchPanel";
  * state and refs.
  */
 function ItemsAndSearchPanels({ loading, outfitState, dispatchToOutfit }) {
-  const [searchQuery, setSearchQuery] = React.useState(null);
+  const [searchQuery, setSearchQuery] = React.useState(emptyQuery);
   const scrollContainerRef = React.useRef();
   const searchQueryRef = React.useRef();
   const firstSearchResultRef = React.useRef();
 
+  const onChange = React.useCallback(
+    (newQuery) => setSearchQuery(newQuery || emptyQuery),
+    [setSearchQuery]
+  );
+
   return (
     <Flex direction="column" height="100%">
       <Box px="5" py="3" boxShadow="sm">
@@ -34,7 +42,7 @@ function ItemsAndSearchPanels({ loading, outfitState, dispatchToOutfit }) {
           onChange={setSearchQuery}
         />
       </Box>
-      {searchQuery ? (
+      {searchQuery.value || searchQuery.filterToZoneLabel ? (
         <Box
           key="search-panel"
           gridArea="items"

src/app/WardrobePage/SearchToolbar.js

@@ -12,6 +12,7 @@ import {
   useColorModeValue,
 } from "@chakra-ui/core";
 import { CloseIcon, SearchIcon } from "@chakra-ui/icons";
+import { css } from "emotion";
 import Autosuggest from "react-autosuggest";
 
 /**
@@ -81,11 +82,11 @@ function SearchToolbar({
         });
       }}
       getSuggestionValue={(zl) => zl}
-      shouldRenderSuggestions={() => query?.filterToZoneLabel == null}
+      shouldRenderSuggestions={() => query.filterToZoneLabel == null}
       renderSuggestion={renderSuggestion}
       renderInputComponent={(props) => (
         <InputGroup>
-          {query?.filterToZoneLabel ? (
+          {query.filterToZoneLabel ? (
             <InputLeftAddon>
               <SearchIcon color="gray.400" marginRight="3" />
               <Box fontSize="sm">{query.filterToZoneLabel}</Box>
@@ -119,12 +120,23 @@ function SearchToolbar({
         // placeholder: "Search for items to add…",
         "aria-label": "Search for items to add…",
         focusBorderColor: focusBorderColor,
-        value: query?.value || "",
+        value: query.value || "",
         ref: searchQueryRef,
         minWidth: 0,
         // HACK: Chakra isn't noticing the InputLeftElement swapping out
-        //       for the InputLeftAddon, so the padding isn't updating.
+        //       for the InputLeftAddon, so the styles aren't updating...
-        paddingLeft: query?.filterToZoneLabel ? "1rem" : "2.5rem",
+        //       Hard override!
+        className: css`
+          padding-left: ${query.filterToZoneLabel
+            ? "1rem"
+            : "2.5rem"} !important;
+          border-bottom-left-radius: ${query.filterToZoneLabel
+            ? "0"
+            : "0.25rem"} !important;
+          border-top-left-radius: ${query.filterToZoneLabel
+            ? "0"
+            : "0.25rem"} !important;
+        `,
         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.
@@ -146,10 +158,8 @@ function SearchToolbar({
               return;
             }
             onMoveFocusDownToResults(e);
-          } else if (e.key === "Backspace") {
+          } else if (e.key === "Backspace" && e.target.selectionStart === 0) {
-            if (query.value === "") {
+            onChange({ ...query, filterToZoneLabel: null });
-              onChange({ ...query, filterToZoneLabel: null });
-            }
           }
         },
       }}