Fix: Ensure drawer opens at the specified active snap point on initial render #473
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.
Issue: Drawer Initializes at First Snap Point Regardless of activeSnapPoint Setting
When setting
activeSnapPoint
to any value other than the first element in thesnapPoints
array, the drawer component always initializes at the first snap point on the initial render. It only updates to the correctactiveSnapPoint
after an external re-render occurs. This behavior is due to how the initial style is assigned and howsnapPointsOffset
is calculated when the component first mounts.This can be recreated by running the repo localy, and try to use
/initial-snap
test route. This does not work of the bat (it will open drawer with offset for the first element in thesnapPoints
array), but openinginitial-snap/page.tsx
, and saving any change, will force a re-render which will then open the drawer at the correct snap point.Current Behavior:
The
DialogPrimitive.Content
component assigns the CSS custom property--snap-point-heigh
t tosnapPointsOffset[0]
, which corresponds to the first snap point.vaul/src/index.tsx
Lines 885 to 892 in 1142f66
Proposed Change in PR:
In this PR, I changed the initialization of
--snap-point-height
to useactiveSnapPointIndex
instead of always defaulting to the first element. This ensures that the drawer starts at the correct snap point specified byactiveSnapPoint
without requiring a re-render.