fix(web): detached/form slide-in, scroll, footer click, grabber#684
Merged
Conversation
vaul wraps Drawer.Content children in [data-vaul-auto-size-wrapper] with display: flow-root, which doesn't honor descendant flex layout — the scroll container's flex:1 had nothing to fill so it sized to content and never overflowed. When scrollable, wrap header + scroll container in an absolutely- positioned flex column sized to the visible portion via calc(100% - var(--snap-point-height, 0px)).
Footer is rendered via vaul's detachedSiblings as a sibling of Drawer.Content inside [data-vaul-detached-wrapper], so Radix Dialog treats pointerdowns on it as outside the content and dismisses. Extend handlePointerDownOutside to also preventDefault when the target is anywhere inside the detached wrapper.
Headers with zIndex:1 (a common pattern for absolute-positioned headers that overlay scroll content) rendered later in DOM than the grabber and stole its pointer events — leaving the sheet unable to expand in `handleOnly` mode where only the grabber can drag. Bump the grabber's zIndex to 2 so it stays above absolute headers.
The handleOnly mapping isn't the right semantics for scrollingExpandsSheet=false. Drop it for now; the option becomes a no-op on web until a proper mapping is figured out.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
A handful of web-only fixes for detached/form-mode sheets:
Content'swasOpenRefstarted asisOpen, so a mount withinitialDetentIndexset saw no transition and snapped straight to rest. Initialize tofalseso the first render is detected as a false→true transition and runs the slide-up animation.[data-vaul-auto-size-wrapper](display: flow-root), which doesn't propagate height to descendant flex children. Wrap the scrollable branch's header + scroll container in an absolute-positioned flex column sized tocalc(100% - var(--snap-point-height, 0px))so the innerflex: 1scroll area has a definite height.detachedSiblingssibling ofDrawer.Content, so Radix treats clicks on it as outside. Detect clicks inside[data-vaul-detached-wrapper]inhandleDismissandpreventDefault().zIndexfrom 1 → 2 so absolute-positioned headers (which commonly usezIndex: 1) don't cover it — important when only the grabber can drag.scrollingExpandsSheet→handleOnlymapping: removed, no longer needed after the scroll fix.Type of Change
Test Plan
Checklist