From c3bd1d30f2f93a8f1786bbf043c2e8e01e9ab96a Mon Sep 17 00:00:00 2001 From: Sergey Kozyrenko Date: Sat, 23 May 2026 13:36:26 +0700 Subject: [PATCH] test(frontend): de-flake DetailNavigationSheet typing test via fireEvent.change MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Baseline 8/10 fail (80% flake) → 20/20 pass. Root cause was `user.type` racing the Radix Sheet focus trap, not the `useDebounce` macrotask theory from the prior investigation: with `defaultOpen=true` Radix sets `body { pointer-events: none }`, swallowing user-event's internal click, so keystrokes route to whatever element currently holds focus (the SheetContent close button) instead of the input. `inputValue` stays empty and the listbox never narrows. `fireEvent.change` mirrors the sidestep already used in the URL-filter AND test in the same file. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../detail-navigation/detail-navigation-sheet.test.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.test.tsx b/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.test.tsx index b0eddc50..3e204931 100644 --- a/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.test.tsx +++ b/frontend/src/components/shared/detail-navigation/detail-navigation-sheet.test.tsx @@ -279,11 +279,12 @@ describe('DetailNavigationSheet — search input', () => { }); it('typing narrows the listbox immediately when searchDebounceMs=0', async () => { - const user = userEvent.setup(); renderSheet({ currentId: 'a' }); const input = await screen.findByRole('textbox'); - await user.type(input, 'cha'); + // `fireEvent.change` — `user.type` races with the Radix focus trap (see + // the URL-filter AND test below for the same sidestep). + fireEvent.change(input, { target: { value: 'cha' } }); const listbox = await screen.findByRole('listbox');