From 624b43af391cfff8c32be0c64865aebc392d590f Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Mon, 21 Apr 2025 17:02:06 -0700
Subject: [PATCH 1/3] #80 - Fix search bar bugs

---
 src/components/Header/Search.jsx              | 77 +++++++++++--------
 .../SingleTermView/OverView/Details.jsx       | 14 ++--
 2 files changed, 52 insertions(+), 39 deletions(-)

diff --git a/src/components/Header/Search.jsx b/src/components/Header/Search.jsx
index 7b9d0cd1..0a3958a4 100644
--- a/src/components/Header/Search.jsx
+++ b/src/components/Header/Search.jsx
@@ -101,7 +101,6 @@ const Search = () => {
   const handleSelectTerm = (event, newInputValue) => {
     if (!newInputValue) return;
     
-    setSearchTerm("");
     setSelectedValue(newInputValue?.label);
     handleCloseList();
     navigate(`/view?searchTerm=${newInputValue?.ilx}`);
@@ -119,14 +118,40 @@ const Search = () => {
     }
   }
 
+  const handleEnterKey = (event) => {
+    if (event.key === 'Enter' && searchTerm.trim()) {
+      event.preventDefault();
+      handleSearchTermClick();
+    }
+  };
+
   const handleChangeTabs = (event, newValue) => setTabValue(newValue);
 
+  const resetSearch = () => {
+    setOpenList(true);
+    setSearchTerm("");
+    setSelectedValue(null);
+    setTerms([])
+    setOntologies([])
+    setOrganizations([])
+  };
+
+  const escapeSearch = () => {
+    setOpenList(false);
+    setSearchTerm("");
+    setSelectedValue(null);
+    setTabValue(0);
+    setTerms([])
+    setOntologies([])
+    setOrganizations([])
+  };
+
   const handleKeyDown = useCallback(event => {
     if (event.ctrlKey && event.key === 'k') {
       setOpenList(true);
     }
     if (event.key === 'Escape') {
-      handleCloseList();
+      escapeSearch();
     }
   }, []);
 
@@ -267,10 +292,14 @@ 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}
@@ -278,27 +307,17 @@ const Search = () => {
       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 +329,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 +356,7 @@ const Search = () => {
                   <Box display="flex" alignItems="center" gap="0.75rem">
                     <IconButton
                       sx={styles.searchButton}
-                      onClick={() => setOpenList(true)}
+                      onClick={resetSearch}
                     >
                       <CloseIcon />
                     </IconButton>
diff --git a/src/components/SingleTermView/OverView/Details.jsx b/src/components/SingleTermView/OverView/Details.jsx
index b594f61d..bfc0f389 100644
--- a/src/components/SingleTermView/OverView/Details.jsx
+++ b/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>

From b4704f4f5983e2c4be8410f9507b06546ccaacdd Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Tue, 22 Apr 2025 11:12:14 -0700
Subject: [PATCH 2/3] #80 - Make Lint Pass Again

---
 src/components/Header/Search.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Header/Search.jsx b/src/components/Header/Search.jsx
index 0a3958a4..7cf9cc27 100644
--- a/src/components/Header/Search.jsx
+++ b/src/components/Header/Search.jsx
@@ -85,7 +85,7 @@ const styles = {
 const Search = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [openList, setOpenList] = useState(false);
-  const [selectedValue, setSelectedValue] = useState(null);
+  const [setSelectedValue] = useState(null);
   const [tabValue, setTabValue] = useState(0);
   const navigate = useNavigate();
   const query = useQuery();
@@ -136,7 +136,7 @@ const Search = () => {
     setOrganizations([])
   };
 
-  const escapeSearch = () => {
+  const escapeSearch = useCallback(() => {
     setOpenList(false);
     setSearchTerm("");
     setSelectedValue(null);
@@ -144,7 +144,7 @@ const Search = () => {
     setTerms([])
     setOntologies([])
     setOrganizations([])
-  };
+  },[setSelectedValue]);
 
   const handleKeyDown = useCallback(event => {
     if (event.ctrlKey && event.key === 'k') {
@@ -153,7 +153,7 @@ const Search = () => {
     if (event.key === 'Escape') {
       escapeSearch();
     }
-  }, []);
+  }, [escapeSearch]);
 
   useEffect(() => {
     document.addEventListener('keydown', handleKeyDown);

From 06633ba3a27603e8fee562f172961c5539525527 Mon Sep 17 00:00:00 2001
From: jrmartin <jesus@metacell.us>
Date: Tue, 22 Apr 2025 19:10:45 -0700
Subject: [PATCH 3/3] #80 - Fix autocomplete dropdown not clearing

---
 src/components/Header/Search.jsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/Header/Search.jsx b/src/components/Header/Search.jsx
index 7cf9cc27..87dd9ba5 100644
--- a/src/components/Header/Search.jsx
+++ b/src/components/Header/Search.jsx
@@ -85,7 +85,6 @@ const styles = {
 const Search = () => {
   const [searchTerm, setSearchTerm] = useState("");
   const [openList, setOpenList] = useState(false);
-  const [setSelectedValue] = useState(null);
   const [tabValue, setTabValue] = useState(0);
   const navigate = useNavigate();
   const query = useQuery();
@@ -101,13 +100,11 @@ const Search = () => {
   const handleSelectTerm = (event, newInputValue) => {
     if (!newInputValue) return;
     
-    setSelectedValue(newInputValue?.label);
     handleCloseList();
     navigate(`/view?searchTerm=${newInputValue?.ilx}`);
   };
 
   const handleSearchTermClick = () => {
-    setSelectedValue(searchTerm);
     navigate(`/search?searchTerm=${searchTerm}`);
     handleCloseList();
   };
@@ -128,9 +125,8 @@ const Search = () => {
   const handleChangeTabs = (event, newValue) => setTabValue(newValue);
 
   const resetSearch = () => {
-    setOpenList(true);
+    setOpenList(false);
     setSearchTerm("");
-    setSelectedValue(null);
     setTerms([])
     setOntologies([])
     setOrganizations([])
@@ -139,12 +135,11 @@ const Search = () => {
   const escapeSearch = useCallback(() => {
     setOpenList(false);
     setSearchTerm("");
-    setSelectedValue(null);
     setTabValue(0);
     setTerms([])
     setOntologies([])
     setOrganizations([])
-  },[setSelectedValue]);
+  },[]);
 
   const handleKeyDown = useCallback(event => {
     if (event.ctrlKey && event.key === 'k') {