diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/SearchBar.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/SearchBar.component.tsx index 4c72e8d4997..bfa37f8fa89 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/SearchBar.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/SearchBarComponent/SearchBar.component.tsx @@ -16,7 +16,7 @@ import { Input, InputProps } from 'antd'; import classNames from 'classnames'; import { debounce, isEmpty } from 'lodash'; import { LoadingState } from 'Models'; -import { useCallback, useEffect, useState } from 'react'; +import { useCallback, useEffect, useRef, useState } from 'react'; import { ReactComponent as IconSearchV1 } from '../../../assets/svg/search.svg'; import { useTableFilters } from '../../../hooks/useTableFilters'; import Loader from '../Loader/Loader'; @@ -56,9 +56,10 @@ const Searchbar = ({ inputProps, urlSearchKey, }: SearchBarProps) => { - const [userSearch, setUserSearch] = useState(''); + const [userSearch, setUserSearch] = useState(searchValue ?? ''); const [loadingState, setLoadingState] = useState('initial'); const [isSearchBlur, setIsSearchBlur] = useState(true); + const isTypingRef = useRef(false); const { setFilters } = useTableFilters( urlSearchKey ? { @@ -68,7 +69,9 @@ const Searchbar = ({ ); useEffect(() => { - setUserSearch(searchValue ?? ''); + if (!isTypingRef.current && searchValue !== userSearch) { + setUserSearch(searchValue ?? ''); + } }, [searchValue]); const debouncedOnSearch = useCallback( @@ -80,6 +83,7 @@ const Searchbar = ({ } onSearch(searchText); + isTypingRef.current = false; }, [onSearch] ); @@ -91,6 +95,7 @@ const Searchbar = ({ const handleChange = (e: React.ChangeEvent<{ value: string }>): void => { const searchText = e.target.value; + isTypingRef.current = true; setUserSearch(searchText); setLoadingState((pre) => (pre !== 'waiting' ? 'waiting' : pre)); debounceOnSearch(searchText); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.test.tsx index 381151a10fa..a83b9ee83cf 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.test.tsx @@ -416,7 +416,7 @@ describe('Test UserListPage component', () => { expect(mockTableComponent).toHaveBeenCalledWith( expect.objectContaining({ searchProps: expect.objectContaining({ - typingInterval: 400, + typingInterval: 500, }), }), expect.anything() diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx index 29c3a41a72a..31dc20dc07b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/UserListPage/UserListPageV1.tsx @@ -435,7 +435,7 @@ const UserListPageV1 = () => { type: t('label.user'), })}...`, searchValue: searchValue, - typingInterval: 400, + typingInterval: 500, urlSearchKey: 'user', onSearch: handleSearch, }),