@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles"
88import { Theme } from "@material-ui/core/styles/createTheme"
99import SearchIcon from "@material-ui/icons/Search"
1010import debounce from "just-debounce-it"
11- import { useCallback , useRef , useState } from "react"
11+ import { useCallback , useEffect , useRef , useState } from "react"
1212import { getValidationErrorMessage } from "../../api/errors"
1313import { CloseDropdown , OpenDropdown } from "../DropdownArrows/DropdownArrows"
1414import { Stack } from "../Stack/Stack"
@@ -35,7 +35,10 @@ export const SearchBarWithFilter: React.FC<
3535> = ( { filter, onFilter, presetFilters, error, docs} ) => {
3636const styles = useStyles ( { error :Boolean ( error ) } )
3737const searchInputRef = useRef < HTMLInputElement > ( null )
38-
38+ const [ value , setValue ] = useState ( filter )
39+ useEffect ( ( ) => {
40+ setValue ( filter )
41+ } , [ filter ] )
3942// debounce query string entry by user
4043// we want the dependency array empty here
4144// as we don't need to redefine the function
@@ -92,10 +95,11 @@ export const SearchBarWithFilter: React.FC<
9295< OutlinedInput
9396id = "query"
9497name = "query"
95- defaultValue = { filter }
9698error = { Boolean ( error ) }
99+ value = { value }
97100className = { styles . inputStyles }
98101onChange = { ( event ) => {
102+ setValue ( event . currentTarget . value )
99103debouncedOnFilter ( event . currentTarget . value )
100104} }
101105inputRef = { searchInputRef }