[v3-2-test] fix(ui): sync SearchBar value with defaultValue changes (#65054)

airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx

@@ -81,4 +81,38 @@ describe("Test SearchBar", () => {
 
     expect(onChange).toHaveBeenCalledTimes(1);
   });
+
+  it("syncs input value when defaultValue changes", async () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <SearchBar defaultValue="initial-search" onChange={onChange} placeholder="Search Dags" />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+    const input = screen.getByTestId("search-dags");
+
+    expect((input as HTMLInputElement).value).toBe("initial-search");
+
+    rerender(<SearchBar defaultValue="updated-search" onChange={onChange} placeholder="Search Dags" />);
+
+    await waitFor(() => expect((input as HTMLInputElement).value).toBe("updated-search"));
+  });
+
+  it("does not override local typing when defaultValue rerenders unchanged", () => {
+    const onChange = vi.fn();
+    const { rerender } = render(
+      <SearchBar defaultValue="initial" onChange={onChange} placeholder="Search Dags" />,
+      {
+        wrapper: Wrapper,
+      },
+    );
+    const input = screen.getByTestId("search-dags");
+
+    fireEvent.change(input, { target: { value: "user-typing" } });
+
+    rerender(<SearchBar defaultValue="initial" onChange={onChange} placeholder="Search Dags" />);
+
+    expect((input as HTMLInputElement).value).toBe("user-typing");
+  });
 });

airflow-core/src/airflow/ui/src/components/SearchBar.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import { CloseButton, Input, InputGroup, Kbd, type InputGroupProps } from "@chakra-ui/react";
-import { useState, useRef, type ChangeEvent } from "react";
+import { useEffect, useRef, useState, type ChangeEvent } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import { useTranslation } from "react-i18next";
 import { FiSearch } from "react-icons/fi";
@@ -46,6 +46,11 @@ export const SearchBar = ({
   const [value, setValue] = useState(defaultValue);
   const metaKey = getMetaKey();
   const { t: translate } = useTranslation(["dags"]);
+
+  useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
   const onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
     handleSearchChange(event.target.value);