diff --git a/packages/web/src/components/SearchInput/index.jsx b/packages/web/src/components/SearchInput/index.jsx index 08433fd5..d04dd438 100644 --- a/packages/web/src/components/SearchInput/index.jsx +++ b/packages/web/src/components/SearchInput/index.jsx @@ -7,7 +7,7 @@ import FormControl from '@mui/material/FormControl'; import SearchIcon from '@mui/icons-material/Search'; import useFormatMessage from 'hooks/useFormatMessage'; -export default function SearchInput({ onChange, defaultValue = '' }) { +export default function SearchInput({ onChange, defaultValue = '', value }) { const formatMessage = useFormatMessage(); return ( @@ -16,6 +16,7 @@ export default function SearchInput({ onChange, defaultValue = '' }) { 1; - const onSearchChange = React.useCallback((event) => { - setSearchParams({ flowName: event.target.value }); - }, []); + const onSearchChange = React.useCallback( + (event) => { + const value = event.target.value; + setSearchValue(value); + setSearchParams({ + flowName: value, + ...(folderId && { folderId }), + }); + }, + [folderId, setSearchParams], + ); const getPathWithSearchParams = (page, flowName) => { const searchParams = new URLSearchParams(); @@ -75,6 +84,15 @@ export default function Flows() { } }; + React.useEffect( + function resetSearchValue() { + if (!searchParams.has('flowName')) { + setSearchValue(''); + } + }, + [searchParams], + ); + React.useEffect( function redirectToLastPage() { if (navigateToLastPage) { @@ -99,7 +117,7 @@ export default function Flows() { - +