ui v2: fix searchfield bugs (#784)

frontend/packages/core/src/AppLayout/search.tsx

@@ -54,13 +54,18 @@ const InputField = styled(TextField)({
         background: "#e7e7ea",
       },
       "&:active": {
-        background:
-          "linear-gradient(0deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.85)), #0D1030;",
+        background: "#DBDBE0",
       },
     },
   },
 });
 
+// search's result options container
+const ResultGrid = styled(Grid)({
+  height: "inherit",
+  padding: "12px 16px 12px 16px",
+});
+
 // search's result options
 const ResultLabel = styled(Typography)({
   color: "#0d1030",
@@ -100,6 +105,7 @@ const Popper = styled(MuiPopper)({
   },
   ".MuiAutocomplete-option": {
     height: "48px",
+    padding: "0px",
   },
   ".MuiAutocomplete-option[data-focus='true']": {
     background: "#ebedfb",
@@ -168,11 +174,11 @@ interface ResultProps {
 }
 
 const Result: React.FC<ResultProps> = ({ option, handleSelection }) => (
-  <Grid container alignItems="center" onClick={handleSelection}>
+  <ResultGrid container alignItems="center" onClick={handleSelection}>
     <Grid item xs>
       <ResultLabel>{option.label}</ResultLabel>
     </Grid>
-  </Grid>
+  </ResultGrid>
 );
 
 const filterResults = (searchOptions: SearchIndex[], state: FilterOptionsState<SearchIndex>) => {
@@ -239,6 +245,15 @@ const SearchField: React.FC = () => {
     setOpen(false);
   };
 
+  // If workflow selected by pressing enter/return,
+  // update the open state to collapse search bar to search icon
+  function handleListKeyDown(event) {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      setOpen(false);
+    }
+  }
+
   return (
     <Grid container alignItems="center">
       {open ? (
@@ -261,6 +276,7 @@ const SearchField: React.FC = () => {
             popupIcon={<CustomCloseIcon />}
             forcePopupIcon={!!showOptions}
             noOptionsText="No results found"
+            onKeyDown={handleListKeyDown}
           />
         </ClickAwayListener>
       ) : (