diff --git a/src/components/Header/Search.jsx b/src/components/Header/Search.jsx index 7b9d0cd1..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 [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,10 +287,14 @@ const Search = () => { ); }); + const displayOptions = (tabValue === 0 ? terms : tabValue === 1 ? organizations : ontologies); + const options = displayOptions?.length ? displayOptions : [{ hidden: true }]; + return ( options} open={openList} @@ -278,27 +302,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 ( + sx={styles.listItem} + {...otherProps} + > {tabValue === 0 ? : tabValue === 1 ? : } {option?.label || option?.name} {option?.submittedBy} @@ -310,26 +324,20 @@ const Search = () => { + sx={styles.searchButton} + > + Go to + ); - }} + }} renderInput={(params) => ( { setOpenList(true)} + onClick={resetSearch} > 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 - {data?.synonym?.map((synonym) => ( + {data?.synonym && - {synonym} {synonym} + {data?.synonym} {data?.synonym} } /> - ))} + } @@ -65,9 +65,9 @@ const Details = ({loading, data }) => { Existing IDs - {data?.existingID?.map((id) => ( - } onClick={() => handleChipClick(id)} /> - ))} + {data?.existingID && ( + } onClick={() => handleChipClick(data?.existingID)} /> + )}