Fix background reset on new next version (#111)

* Fix background reset * Remove console logs
emilkowalski · Sep 22, 2023 · 89219b6 · 89219b6
1 parent 0270960
commit 89219b6
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 80 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/helpers.ts b/src/helpers.ts
@@ -33,6 +33,7 @@ export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCac
   });
 
   if (ignoreCache) return;
+
   cache.set(el, originalStyles);
 }
 

diff --git a/src/index.tsx b/src/index.tsx
@@ -508,6 +508,14 @@ function Root({
     resetDrawer();
   }
 
+  React.useEffect(() => {
+    // Trigger enter animation without using CSS animation
+    if (isOpen) {
+      setVisible(true);
+      scaleBackground(true);
+    }
+  }, [isOpen]);
+
   function scaleBackground(open: boolean) {
     const wrapper = document.querySelector('[vaul-drawer-wrapper]');
 
@@ -675,19 +683,11 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(function (
     keyboardIsOpen,
     snapPointsOffset,
     visible,
-    setVisible,
     closeDrawer,
-    scaleBackground,
     modal,
   } = useDrawerContext();
   const composedRef = useComposedRefs(ref, drawerRef);
 
-  React.useEffect(() => {
-    // Trigger enter animation without using CSS animation
-    setVisible(true);
-    scaleBackground(true);
-  }, []);
-
   return (
     <DialogPrimitive.Content
       onOpenAutoFocus={(e) => {

diff --git a/website/package.json b/website/package.json
@@ -17,7 +17,7 @@
     "clsx": "^2.0.0",
     "eslint": "8.45.0",
     "eslint-config-next": "13.4.10",
-    "next": "13.4.10",
+    "next": "13.5.1",
     "postcss": "8.4.26",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-Original file line number
+Diff line change
@@ Expand Up @@
       });
       if (ignoreCache) return;
       cache.set(el, originalStyles);
     }
@@ Expand Down @@