#80 - Revisit issue 80 and fix bugs with search

src/components/Header/Search.jsx

@@ -85,7 +85,6 @@ const styles = {
 const Search = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [openList, setOpenList] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(null);
   const [tabValue, setTabValue] = useState(0);
   const navigate = useNavigate();
   const query = useQuery();
@@ -101,14 +100,11 @@ const Search = () => {
   const handleSelectTerm = (event, newInputValue) => {
     if (!newInputValue) return;
 
-    setSearchTerm("");
-    setSelectedValue(newInputValue?.label);
     handleCloseList();
     navigate(`/view?searchTerm=${newInputValue?.ilx}`);
   };
 
   const handleSearchTermClick = () => {
-    setSelectedValue(searchTerm);
     navigate(`/search?searchTerm=${searchTerm}`);
     handleCloseList();
   };
@@ -119,16 +115,40 @@ const Search = () => {
     }
   }
 
+  const handleEnterKey = (event) => {
+    if (event.key === 'Enter' && searchTerm.trim()) {
+      event.preventDefault();
+      handleSearchTermClick();
+    }
+  };
+
   const handleChangeTabs = (event, newValue) => setTabValue(newValue);
 
+  const resetSearch = () => {
+    setOpenList(false);
+    setSearchTerm("");
+    setTerms([])
+    setOntologies([])
+    setOrganizations([])
+  };
+
+  const escapeSearch = useCallback(() => {
+    setOpenList(false);
+    setSearchTerm("");
+    setTabValue(0);
+    setTerms([])
+    setOntologies([])
+    setOrganizations([])
+  },[]);
+
   const handleKeyDown = useCallback(event => {
     if (event.ctrlKey && event.key === 'k') {
       setOpenList(true);
     }
     if (event.key === 'Escape') {
-      handleCloseList();
+      escapeSearch();
     }
-  }, []);
+  }, [escapeSearch]);
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);
@@ -267,38 +287,32 @@ const Search = () => {
     );
   });
 
+  const displayOptions = (tabValue === 0 ? terms : tabValue === 1 ? organizations : ontologies);
+  const options = displayOptions?.length ? displayOptions : [{ hidden: true }];
+
   return (
     <Autocomplete
       sx={{ '& .MuiOutlinedInput-root': { borderRadius: openList ? '0.5rem 0.5rem 0 0' : '0.5rem' } }}
-      options={tabValue === 0 ? terms : tabValue === 1 ? organizations : ontologies}
+      options={options}
+      inputValue={searchTerm || ""}
       onChange={handleSelectTerm}
       filterOptions={(options) => options}
       open={openList}
       onOpen={handleOpenList}
       onClose={handleCloseList}
       onFocus={handleInputFocus}
       forcePopupIcon={false}
-      getOptionLabel={(option) => option.label || option.name || ''}
+      getOptionLabel={(option) => option?.hidden ? '' : (option.label || option.name || '')}
       renderOption={(props, option, { selected }) => {
+        if (option?.hidden) return null;
+
         const { key, ...otherProps } = props;
         return (
           <ListItem
             key={key}
-            sx={{
-              display: "flex",
-              gap: "0.5rem",
-              alignItems: "center",
-              "&:hover": {
-                "& .MuiChip-root": {
-                  display: "none",
-                },
-              },
-              "&:not(:hover)": {
-                "& .MuiButton-root": {
-                  display: "none",
-                },
-              },
-            }} {...otherProps}>
+            sx={styles.listItem}
+            {...otherProps}
+          >
             {tabValue === 0 ? <TermsIcon /> : tabValue === 1 ? <CorporateFareOutlinedIcon sx={{ color: gray600 }} /> : <FolderOutlinedIcon sx={{ color: gray600 }} />}
             <Typography variant="body1">{option?.label || option?.name}</Typography>
             <Typography variant="body2">{option?.submittedBy}</Typography>
@@ -310,26 +324,20 @@ const Search = () => {
             <Button
               variant="text"
               id={option?.label}
-              sx={{
-                p: 0,
-                height: "auto",
-                lineHeight: 1,
-                background: "transparent",
-                "&:hover": {
-                  backgroundColor: "transparent",
-                },
-              }}
-            >Go to <ForwardIcon /></Button>
+              sx={styles.searchButton}
+            >
+              Go to <ForwardIcon />
+            </Button>
           </ListItem>
         );
-      }}
+      }}      
       renderInput={(params) => (
         <TextField
           {...params}
           variant="outlined"
           placeholder="Find something..."
-          value={searchTerm || selectedValue}
           onChange={handleInputChange}
+          onKeyDown={handleEnterKey}
           InputProps={{
             ...params.InputProps,
             startAdornment: (
@@ -343,7 +351,7 @@ const Search = () => {
                   <Box display="flex" alignItems="center" gap="0.75rem">
                     <IconButton
                       sx={styles.searchButton}
-                      onClick={() => setOpenList(true)}
+                      onClick={resetSearch}
                     >
                       <CloseIcon />
                     </IconButton>

src/components/SingleTermView/OverView/Details.jsx

@@ -34,18 +34,18 @@ const Details = ({loading,  data }) => {
               Synonyms
             </Typography>
             <Box display="flex" flexWrap="wrap" gap=".5rem">
-              {data?.synonym?.map((synonym) => (
+              {data?.synonym && 
                 <Chip
                   className="rounded dual-text-chip"
                   variant="outlined"
-                  key={synonym}
+                  key={data?.synonym}
                   label={
                     <span>
-                      {synonym} <span>{synonym}</span>
+                      {data?.synonym} <span>{data?.synonym}</span>
                     </span>
                   }
                 />
-              ))}
+              }
             </Box>
           </Stack>
         </Grid>
@@ -65,9 +65,9 @@ const Details = ({loading,  data }) => {
               Existing IDs
             </Typography>
             <Box display="flex" flexWrap="wrap" gap=".5rem">
-              {data?.existingID?.map((id) => (
-                <Chip className="rounded IDchip-outlined" variant="outlined" key={id} label={id} icon={<OpenInNewOutlinedIcon />} onClick={() => handleChipClick(id)} />
-              ))}
+              {data?.existingID && (
+                <Chip className="rounded IDchip-outlined" variant="outlined" key={data?.existingID} label={data?.existingID} icon={<OpenInNewOutlinedIcon />} onClick={() => handleChipClick(data?.existingID)} />
+              )}
             </Box>
           </Stack>
         </Grid>