#10257 Confirmation dialogue button alignment#10267
#10257 Confirmation dialogue button alignment#10267andrewvarga wants to merge 7 commits intomainfrom
Conversation
…of <p>. This will cause a hydration error.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
| useEffect(() => { | ||
| const onWindowKeyDown = (event: KeyboardEvent) => { | ||
| if (event.key === 'Escape') { | ||
| event.preventDefault() | ||
| event.stopPropagation() | ||
| onDismiss() | ||
| } | ||
| } | ||
|
|
||
| window.addEventListener('keydown', onWindowKeyDown) | ||
| return () => { | ||
| window.removeEventListener('keydown', onWindowKeyDown) | ||
| } | ||
| }, [onDismiss]) |
There was a problem hiding this comment.
The custom Escape key handler is redundant and potentially problematic. The @headlessui/react Dialog component already handles Escape key presses via the onClose prop (line 61). This custom useEffect hook adds a window-level listener that will also call onDismiss() when Escape is pressed, potentially causing onDismiss to be invoked twice.
The event.stopPropagation() may not prevent the Dialog's internal handler from firing since they operate at different levels.
Fix: Remove this entire useEffect block. The Dialog's built-in Escape handling is sufficient:
// Remove lines 19-32
// The Dialog component's onClose={onDismiss} already handles EscapeSpotted by Graphite
Is this helpful? React 👍 or 👎 to let us know.
jtran
left a comment
There was a problem hiding this comment.
Code looks good to me, and I tested the delete project. I don't know if the graphite comment is right, though.
Yeah, I tried with the Dialog's onClose first but that never triggered because we're capturing key presses in other places too.. |
Fixes #10257 and a few related issues.
DeleteProjectDialog.tsxpreviously:Now (on Windows the order is:

Delete,Cancelbut they are still both aligned to the right):SetVarNameModal.tsxpreviously:Now:

ToastUpdate.tsxpreviously:Now:

UpdatedRestartModal.tsxbecause it wasn't used anywhere, I think this was replaced byToastUpdate.tsxDeleteProjectDialog.tsx: