From 7fe42cb6ec0649c4483545e56da487435b8a344b Mon Sep 17 00:00:00 2001
From: Kyle Carberry <kyle@carberry.com>
Date: Thu, 9 Mar 2023 20:08:47 +0000
Subject: [PATCH] fix: adjust workspace filter query when the path changes

Previously, when a status would change the filter wouldn't update.
This makes it update if a new value is passed in.
---
 .../SearchBarWithFilter/SearchBarWithFilter.tsx        | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx b/site/src/components/SearchBarWithFilter/SearchBarWithFilter.tsx
index 43fd72b2140af..e81fad43011e8 100644
--- 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}