Fix: Ensure drawer opens at the specified active snap point on initia…

…l render (#473) * add activeSnapPointIndex to context type * passing activeSnapPointIndex to context * getting and using activeSnapPointIndex from context * Added back spaces * added back space * activeSnapPointIndex fallback
emilkowalski · Oct 13, 2024 · e3ba34d · e3ba34d
1 parent 1a8d000
commit e3ba34d
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/context.ts b/src/context.ts
@@ -16,6 +16,7 @@ interface DrawerContextValue {
   keyboardIsOpen: React.MutableRefObject<boolean>;
   snapPointsOffset: number[] | null;
   snapPoints?: (number | string)[] | null;
+  activeSnapPointIndex?: number;
   modal: boolean;
   shouldFade: boolean;
   activeSnapPoint?: number | string | null;

diff --git a/src/index.tsx b/src/index.tsx
@@ -769,6 +769,7 @@ export function Root({
           keyboardIsOpen,
           modal,
           snapPointsOffset,
+          activeSnapPointIndex,
           direction,
           shouldScaleBackground,
           setBackgroundColorOnScale,
@@ -824,6 +825,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
     onDrag,
     keyboardIsOpen,
     snapPointsOffset,
+    activeSnapPointIndex,
     modal,
     isOpen,
     direction,
@@ -891,7 +893,7 @@ export const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
       style={
         snapPointsOffset && snapPointsOffset.length > 0
           ? ({
-              '--snap-point-height': `${snapPointsOffset[0]!}px`,
+              '--snap-point-height': `${snapPointsOffset[activeSnapPointIndex ?? 0]!}px`,
               ...style,
             } as React.CSSProperties)
           : style