diff --git a/frontend/src/components/AdminLogs.dom.test.tsx b/frontend/src/components/AdminLogs.dom.test.tsx index eba9bec0..d342bda4 100644 --- a/frontend/src/components/AdminLogs.dom.test.tsx +++ b/frontend/src/components/AdminLogs.dom.test.tsx @@ -158,6 +158,10 @@ describe("AdminLogs", () => { expect(screen.queryByText("adminLogs.pivotRequest:req-00000001")).toBeNull(); const url = new URLSearchParams(window.location.search); expect([url.get("lreq"), url.get("lgrp"), url.get("lq")]).toEqual([null, "error", "boom"]); + // Neither jump waited out the typing debounce: no read ever mixed one view's filters with the + // other's search text (the request with "boom", or the restored view without it). + const mixed = logsMock.mock.calls.filter(([q]) => (q.request_id != null) === (q.q === "boom")); + expect(mixed).toEqual([]); }); it("keeps the account in use offered when the facets no longer count it", async () => { diff --git a/frontend/src/components/AdminLogs.tsx b/frontend/src/components/AdminLogs.tsx index 9ecd017e..f991f6ab 100644 --- a/frontend/src/components/AdminLogs.tsx +++ b/frontend/src/components/AdminLogs.tsx @@ -82,12 +82,16 @@ export default function AdminLogs() { setLiveState(on); }; const [open, setOpen] = useState(null); - const q = useDebounced(state.q, 300); + // Bumped when the view changes by a jump (a pivot, Back/Forward) rather than by typing: the + // search box's text then applies at once instead of after the typing debounce. + const [jumps, setJumps] = useState(0); + const q = useDebounced(state.q, 300, jumps); useUrlMirror(logsParamUpdates(state)); // Back/Forward lands on another view of the console (a pivot pushed one, below): read it back. useEffect(() => { const onPop = () => { setOpen(null); + setJumps((n) => n + 1); setState(logsParamsToState(new URLSearchParams(window.location.search))); }; window.addEventListener("popstate", onPop); @@ -206,6 +210,7 @@ export default function AdminLogs() { urlWithParams(logsParamUpdates(next)), ); notifyNav(); + setJumps((n) => n + 1); update(next); }; diff --git a/frontend/src/lib/useDebounced.dom.test.ts b/frontend/src/lib/useDebounced.dom.test.ts new file mode 100644 index 00000000..3107b6a0 --- /dev/null +++ b/frontend/src/lib/useDebounced.dom.test.ts @@ -0,0 +1,35 @@ +// @vitest-environment jsdom +import { afterEach, describe, expect, it, vi } from "vitest"; +import { act, renderHook } from "@testing-library/react"; + +import { useDebounced } from "./useDebounced"; + +afterEach(() => { + vi.useRealTimers(); +}); + +describe("useDebounced", () => { + it("hands a value on once it stopped changing for the delay", () => { + vi.useFakeTimers(); + const { result, rerender } = renderHook(({ v }) => useDebounced(v, 300), { + initialProps: { v: "a" }, + }); + rerender({ v: "ab" }); + expect(result.current).toBe("a"); + act(() => vi.advanceTimersByTime(300)); + expect(result.current).toBe("ab"); + }); + + it("takes the value at once when `settle` changes — a jump, not typing", () => { + vi.useFakeTimers(); + const { result, rerender } = renderHook(({ v, s }) => useDebounced(v, 300, s), { + initialProps: { v: "", s: 0 }, + }); + rerender({ v: "boom", s: 1 }); + expect(result.current).toBe("boom"); + rerender({ v: "boomx", s: 1 }); + expect(result.current).toBe("boom"); + act(() => vi.advanceTimersByTime(300)); + expect(result.current).toBe("boomx"); + }); +}); diff --git a/frontend/src/lib/useDebounced.ts b/frontend/src/lib/useDebounced.ts index 3de9c4ba..cc191829 100644 --- a/frontend/src/lib/useDebounced.ts +++ b/frontend/src/lib/useDebounced.ts @@ -3,11 +3,21 @@ import { useEffect, useState } from "react"; // Returns `value` after it has stopped changing for `delay` ms. Lets a text input stay // responsive (it owns the immediate value) while the query it drives only re-runs once the // user pauses — so we don't refetch the feed on every keystroke. -export function useDebounced(value: T, delay = 300): T { +// +// `settle`: a change of it takes `value` at once. A value that did not come from typing (Back +// restoring a search, a pivot clearing one) has no keystrokes to wait out, and the lag only ran a +// query mixing the new filters with the old text (deep-review 2026-09-19). +export function useDebounced(value: T, delay = 300, settle?: unknown): T { const [debounced, setDebounced] = useState(value); + const [settled, setSettled] = useState(settle); useEffect(() => { const id = window.setTimeout(() => setDebounced(value), delay); return () => window.clearTimeout(id); }, [value, delay]); + if (settle !== settled) { + setSettled(settle); + setDebounced(value); + return value; + } return debounced; }