fix: adjust workspace filter query when the path changes (#6539)

kylecarbs · web-flow · commit 1b3b0ea9623c · 2023-03-09T14:23:23.000-06:00
Previously, when a status would change the filter wouldn't update.
This makes it update if a new value is passed in.
diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
@@ -8,7 +8,7 @@ import { makeStyles } from "@material-ui/core/styles"
 import { Theme } from "@material-ui/core/styles/createTheme"
 import SearchIcon from "@material-ui/icons/Search"
 import debounce from "just-debounce-it"
-import { useCallback, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { getValidationErrorMessage } from "../../api/errors"
 import { CloseDropdown, OpenDropdown } from "../DropdownArrows/DropdownArrows"
 import { Stack } from "../Stack/Stack"
@@ -35,7 +35,10 @@ export const SearchBarWithFilter: React.FC<
 > = ({ filter, onFilter, presetFilters, error, docs }) => {
   const styles = useStyles({ error: Boolean(error) })
   const searchInputRef = useRef<HTMLInputElement>(null)
-
+  const [value, setValue] = useState(filter)
+  useEffect(() => {
+    setValue(filter)
+  }, [filter])
   // debounce query string entry by user
   // we want the dependency array empty here
   // as we don't need to redefine the function
@@ -92,10 +95,11 @@ export const SearchBarWithFilter: React.FC<
           <OutlinedInput
             id="query"
             name="query"
-            defaultValue={filter}
             error={Boolean(error)}
+            value={value}
             className={styles.inputStyles}
             onChange={(event) => {
+              setValue(event.currentTarget.value)
               debouncedOnFilter(event.currentTarget.value)
             }}
             inputRef={searchInputRef}
