(airflow) branch v3-2-test updated: [v3-2-test] fix(ui): cancel debounce on clear to prevent stale search value (#64893) (#64907)

[pierrejeambrun]

This is an automated email from the ASF dual-hosted git repository.

pierrejeambrun pushed a commit to branch v3-2-test
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/v3-2-test by this push:
     new 9e3fbb8967b [v3-2-test] fix(ui): cancel debounce on clear to prevent 
stale search value (#64893) (#64907)
9e3fbb8967b is described below

commit 9e3fbb8967b4b9b5351416b47f86657ea7b9d369
Author: github-actions[bot] 
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Fri Apr 10 10:40:34 2026 +0200

    [v3-2-test] fix(ui): cancel debounce on clear to prevent stale search value 
(#64893) (#64907)
    
    (cherry picked from commit 4d75f0ad93bb7a8f23dd4030d43f9d95af33a5c9)
    
    Co-authored-by: Mayank Aggarwal <aggarwalmayank...@gmail.com>
---
 .../airflow/ui/src/components/SearchBar.test.tsx   | 42 ++++++++++++++++++++--
 .../src/airflow/ui/src/components/SearchBar.tsx    | 10 +++---
 2 files changed, 45 insertions(+), 7 deletions(-)

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 0b149d37db6..2d5be3990bd 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
+++ b/airflow-core/src/airflow/ui/src/components/SearchBar.test.tsx
@@ -16,16 +16,22 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { fireEvent, render, screen, waitFor } from "@testing-library/react";
-import { describe, it, expect, vi } from "vitest";
+import { act, fireEvent, render, screen, waitFor } from 
"@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
 
 import { Wrapper } from "src/utils/Wrapper";
 
 import { SearchBar } from "./SearchBar";
 
+afterEach(() => {
+  vi.useRealTimers();
+});
+
 describe("Test SearchBar", () => {
   it("Renders and clear button works", async () => {
-    render(<SearchBar defaultValue="" onChange={vi.fn()} placeholder="Search 
Dags" />, {
+    const onChange = vi.fn();
+
+    render(<SearchBar defaultValue="" onChange={onChange} placeholder="Search 
Dags" />, {
       wrapper: Wrapper,
     });
 
@@ -44,5 +50,35 @@ describe("Test SearchBar", () => {
     fireEvent.click(clearButton);
 
     expect((input as HTMLInputElement).value).toBe("");
+    expect(onChange).toHaveBeenCalledWith("");
+  });
+
+  it("cancels pending debounced changes when clearing", () => {
+    vi.useFakeTimers();
+
+    const onChange = vi.fn();
+
+    render(<SearchBar defaultValue="" onChange={onChange} placeholder="Search 
Dags" />, {
+      wrapper: Wrapper,
+    });
+
+    const input = screen.getByTestId("search-dags");
+
+    fireEvent.change(input, { target: { value: "air" } });
+
+    expect((input as HTMLInputElement).value).toBe("air");
+    expect(onChange).not.toHaveBeenCalled();
+
+    fireEvent.click(screen.getByTestId("clear-search"));
+
+    expect((input as HTMLInputElement).value).toBe("");
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenNthCalledWith(1, "");
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onChange).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx 
b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
index 21bfca4bf50..91825004d45 100644
--- a/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
+++ b/airflow-core/src/airflow/ui/src/components/SearchBar.tsx
@@ -50,6 +50,11 @@ export const SearchBar = ({
     setValue(event.target.value);
     handleSearchChange(event.target.value);
   };
+  const clearSearch = () => {
+    handleSearchChange.cancel();
+    setValue("");
+    onChange("");
+  };
 
   useHotkeys(
     "mod+k",
@@ -70,10 +75,7 @@ export const SearchBar = ({
               aria-label={translate("search.clear")}
               colorPalette="brand"
               data-testid="clear-search"
-              onClick={() => {
-                setValue("");
-                onChange("");
-              }}
+              onClick={clearSearch}
               size="xs"
             />
           ) : undefined}