Repository navigation
Conversation
A closed overlay leaves React Aria's visible-overlay stack at once but stays on screen and clickable while it fades out, so a press on it counted as a press outside the Dialog under it. A scroll closes a list on its own, so clicking a still-visible option dismissed the whole Dialog and lost the form. Mark a closing overlay `data-react-aria-top-layer`, keyed on a new `isExiting` render arg of `DisplayTransition`, in Overlay (popover, modal, tray), ListBoxPopover and Select. Closes CUB-5293 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
A press on a closing nested modal or tray now reaches it, which leaves focus inside it, and its raw `useOverlay` handler swallowed the next `Escape` meant for the Dialog under it. Use `useOverlayEscapeGuard` there, as `Popover` and `Select` already do. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 4249860 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Contributor
🏋️ Size limit report
Compared against main at 04d2e87 — run 37342060991, 2026-10-05T16:35:52Z.To see which modules changed, download the size-limit-statoscope-report artifact from this run and open report.html. |
Contributor
📦 NPM canary releaseDeployed canary version 0.0.0-canary-51dc1fd. |
Contributor
🧪 Storybook is successfully deployed!
|
The toast and notification container is portaled outside any open Dialog, so React Aria counted a press on it as a press outside: the Dialog closed and the action never ran. Mark the container `data-react-aria-top-layer`, as React Aria's own toast region does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
…ing-dropdown-inside-a-dialog
tenphi
deleted the
andrew/cub-5293-picking-an-option-from-a-fading-dropdown-inside-a-dialog
branch
October 5, 2026 16:59
Merged
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Describe changes
Fixes CUB-5293: clicking an option in a list that is fading out, inside a Dialog, closed the whole Dialog and lost the form.
Cause. Our overlays stay mounted, and clickable, through their exit transition, but React Aria takes a closed overlay off its visible-overlay stack at once. A press on a closing list therefore counted as a press outside the Dialog, which was topmost again, and dismissed it. A list closes on its own when the content around its trigger scrolls (
useCloseOnScroll), so a trackpad's momentum or a test runner scrolling a field into view was enough.Fix. A closing overlay is marked
data-react-aria-top-layer, which React Aria never treats as "outside". The press now reaches the list, so the clicked option is picked.DisplayTransition's render prop gets a newisExitingarg:truefrom the render where theisShownprop turns false until the exit finishes. It's needed becausephase(and the render argisShown) still report the shown state for two frames after close, andpreserveContentfreezes every value the render prop closes over, so there was no fresh way to tell a closing overlay from an open one.Overlay(Popover, Modal, Tray: menus,Picker,FilterPicker, popover and modal dialogs),ListBoxPopover(ComboBox,SearchComboBox,TagInput,CommandTextArea) andSelectmark themselves top layer whileisExiting.ModalandTraynow useuseOverlayEscapeGuard, likePopoverandSelect. Pressing a closing nested modal leaves focus inside it, and its rawuseOverlayhandler would otherwise swallow the nextEscapemeant for the Dialog underneath.Toasts and notifications: their container is portaled outside any open Dialog, so pressing a toast or notification action closed the Dialog and the action never ran (unrelated to exit transitions). The container is now permanently
data-react-aria-top-layer, as React Aria's own toast region is. That also keeps it reachable by focus from a Dialog's contained scope, and visible to screen readers while a modal hides the rest of the page.pointer-events: noneduring exit was rejected: a list hanging over the Dialog's backdrop would let the click through to the backdrop and still close the Dialog.Once this ships, the console-ui workaround in cubedevinc/cubejs-enterprise#15818 (
useDialogListPressGuard) can go.Verified
DialogTrigger.browser.test.tsx(FilterPicker, Select, ComboBox, nested modal Dialog, Escape after pressing a closing nested modal or tray) andNotifications.browser.test.tsx(toast and notification actions over a Dialog). Each fails onmainand passes here; reverting any one source file fails only its own case.DialogFormwhose content really scrolls, a realscrollTopchange, a real Playwright click on the fading option) fails onmainand passes here for FilterPicker, Select and Picker. The form keeps its typed value and the option is picked.isExitingunit test inDisplayTransition.test.tsx.pnpm lint,pnpm diagnostics:compiler,pnpm audit-docs --component=DisplayTransitionpass.tschas no errors in changed files (the 22 pre-existing ones are elsewhere). The jsdom suite passes; under very high machine load some unrelated tests timed out and passed on rerun.Checklist
Closes: CUB-5293
🤖 Generated with Claude Code