fix(ui): stabilize account layout and API key dialog#1062
Open
qdzsh wants to merge 4 commits into
Open
Conversation
The earlier dialog fix only exempted clicks landing inside a floating layer (Select/DropdownMenu/Popover content). But the multi-select dropdowns in the Edit API key dialog (Allowed models, Assigned accounts) use a DropdownMenu, and dismissing them by clicking the backdrop produces an outside event whose target is outside every layer -> the dialog closed too, so Save was unreachable. Add a guard: while any floating layer is open (data-state=open), treat the dialog's focus/interact/pointer-outside events as dismissing that layer, not the dialog, and preventDefault. Also include the radix popper wrapper in the target allowlist for robustness.
… race A mouse click outside an OPEN dropdown closed the dialog: Radix dismisses the dropdown first (flipping data-state to closed), so the dialog's outside handler saw no open layer on its live check and closed too. Esc worked because it does not go through the outside-pointer path. Capture isFloatingLayerOpen() in a document pointerdown listener on the CAPTURE phase (runs before Radix's bubble-phase dismiss listeners, while the dropdown is still open) and consult that captured flag in the dialog's outside handlers.
Extract the dialog's nested-floating-layer dismiss guard (target allowlist + capture-phase open-state flag) into a reusable useFloatingLayerDismissGuard hook and consume it from DialogContent. Apply the same guard to SheetContent, which is built on the Dialog primitive and shares the close-on-outside behaviour, so a future Select/dropdown inside a Sheet will not close the sheet. AlertDialog is intentionally left as-is: Radix AlertDialog is non-dismissible on outside pointer interaction by design (it omits those handlers), so it cannot hit this bug.
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.
Summary
Fixes the Accounts page responsive layout and keeps the API key edit dialog open while selecting items from portalled model/account menus — including when the dropdown is dismissed by a mouse click on the backdrop.
Type of change
fix:bug fixLinked issue: None
OpenSpec
Change directory:
openspec/changes/fix-dashboard-responsive-select-dismissalChanges
pointerdownon the capture phase, so it survives Radix closing the dropdown (itsdata-stateflips toclosed) before the dialog's own outside handler runs (the race that made mouse clicks still close the dialog).useFloatingLayerDismissGuardhook consumed byDialogContentandSheetContent.AlertDialogis intentionally left alone — it is non-dismissible on outside interaction by design.Test plan
Results:
git diff --checkpassed.npm run lintpassed.npm run buildpassed.npm run testpassed: 101 files, 632 tests.openspec validate --specsblocked locally:openspecis not installed in this shell.Checklist
openspecis not installed in this shell.