diff --git a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx index 725a72d293b..1bbee49080d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/app-bar/Appbar.tsx @@ -194,24 +194,31 @@ const Appbar: React.FC = (): JSX.Element => { }, ]; + const searchHandler = (value: string) => { + setIsOpen(false); + addToRecentSearched(value); + history.push( + getExplorePathWithSearch( + value, + // this is for if user is searching from another page + location.pathname.startsWith(ROUTES.EXPLORE) + ? appState.explorePageTab + : 'tables' + ) + ); + }; + const handleKeyDown = (e: React.KeyboardEvent) => { const target = e.target as HTMLInputElement; if (e.key === 'Enter') { - setIsOpen(false); - - addToRecentSearched(target.value); - history.push( - getExplorePathWithSearch( - target.value, - // this is for if user is searching from another page - location.pathname.startsWith(ROUTES.EXPLORE) - ? appState.explorePageTab - : 'tables' - ) - ); + searchHandler(target.value); } }; + const handleOnclick = () => { + searchHandler(searchValue ?? ''); + }; + useEffect(() => { setSearchValue(searchQuery); }, [searchQuery]); @@ -243,6 +250,7 @@ const Appbar: React.FC = (): JSX.Element => { void; handleFeatureModal: (value: boolean) => void; handleSearchChange: (value: string) => void; + handleOnClick: () => void; handleKeyDown: (e: React.KeyboardEvent) => void; } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx index 133ab9ca595..4475f1c07aa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/nav-bar/NavBar.tsx @@ -43,6 +43,7 @@ const NavBar = ({ handleFeatureModal, handleSearchChange, handleKeyDown, + handleOnClick, }: NavBarProps) => { const [searchIcon, setSearchIcon] = useState('icon-searchv1'); const navStyle = (value: boolean) => { @@ -80,11 +81,15 @@ const NavBar = ({
- + { + e.preventDefault(); + e.stopPropagation(); + handleOnClick(); + }}> + + { setSearchValue(''); }; + const handleSearch = () => { + if (location.pathname.includes(ROUTES.TOUR)) { + if (searchValue === TOUR_SEARCH_TERM) { + AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; + clearSearchTerm(); + } + + return; + } + }; + const handleKeyDown = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { - if (location.pathname.includes(ROUTES.TOUR)) { - if (searchValue === TOUR_SEARCH_TERM) { - AppState.currentTourPage = CurrentTourPageType.EXPLORE_PAGE; - clearSearchTerm(); - } - - return; - } + handleSearch(); } }; + const handleOnClick = () => { + handleSearch(); + }; useEffect(() => { handleIsTourOpen(true); @@ -216,6 +223,7 @@ const TourPage = () => { isTourRoute handleFeatureModal={handleCountChange} handleKeyDown={handleKeyDown} + handleOnClick={handleOnClick} handleSearchBoxOpen={handleCountChange} handleSearchChange={(value) => setSearchValue(value)} isFeatureModalOpen={false}