From 41b87abcf91f8409cd413dec7bfc91a81c1f5ee1 Mon Sep 17 00:00:00 2001 From: Jiwon Choi Date: Thu, 20 Feb 2025 12:09:27 +0900 Subject: [PATCH] [dev-overlay] fix: dev indicator menu closing after tab access (#76205) ### Why? After the tab access via `onTriggerKeydown()`, the `onTriggerClick()` was triggered, which closed the menu right after it was opened. https://github.com/vercel/next.js/blob/f984d1f6812345e9f079f5a37aae6239bc5aa338/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx#L217-L219 ### Before https://github.com/user-attachments/assets/b5c2b1b9-68e8-4a7c-b8a5-06ca82c26255 ### After https://github.com/user-attachments/assets/48ab32ab-aec8-4a9b-93c5-bbe3957162e0 Closes NDX-790 --- .../errors/dev-tools-indicator/dev-tools-indicator.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx index b1783ad676d10..942db0e811147 100644 --- a/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx +++ b/packages/next/src/client/components/react-dev-overlay/_experimental/internal/components/errors/dev-tools-indicator/dev-tools-indicator.tsx @@ -197,6 +197,7 @@ function DevToolsPopover({ // Open with first item focused if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') { + e.preventDefault() setIsMenuOpen(true) // Run on next tick because querying DOM after state change setTimeout(() => { @@ -206,6 +207,7 @@ function DevToolsPopover({ // Open with last item focused if (e.key === 'ArrowUp') { + e.preventDefault() setIsMenuOpen(true) // Run on next tick because querying DOM after state change setTimeout(() => {