This is an automated email from the ASF dual-hosted git repository.
bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/main by this push:
new 11aba6788e6 fix(ui): sync SearchBar value with defaultValue changes
(#65054)
11aba6788e6 is described below
commit 11aba6788e64ddbd77c6e4d92513684fc88c992a
Author: Mayank Aggarwal <[email protected]>
AuthorDate: Mon Apr 13 19:17:55 2026 +0530
fix(ui): sync SearchBar value with defaultValue changes (#65054)
* fix(ui): sync SearchBar value with defaultValue changes
* fix: resolve eslint hook dependency
* fix(ui): sync SearchBar value with defaultValue changes
* fix(ui): sync SearchBar value with defaultValue changes
* fix(ui): sync SearchBar value with defaultValue changes
---
.../airflow/ui/src/components/SearchBar.test.tsx | 34 ++++++++++++++++++++++
.../src/airflow/ui/src/components/SearchBar.tsx | 7 ++++-
2 files changed, 40 insertions(+), 1 deletion(-)
diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
b/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
index 2d5be3990bd..65f3c4f75d2 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
+++ b/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");
+ });
});
diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
index 91825004d45..f935a847ef5 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
+++ b/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);
