fix: controlled animation issues (#49)

* fix: controlled animation issues * add changeset
huntabyte · Feb 6, 2024 · b2aea43 · b2aea43
1 parent 1a95737
commit b2aea43
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/gorgeous-news-wait.md b/.changeset/gorgeous-news-wait.md
@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: controlled animation issues
diff --git a/src/lib/vaul/components/root.svelte b/src/lib/vaul/components/root.svelte
@@ -27,7 +27,13 @@
 	export let direction: $$Props["direction"] = "bottom";
 
 	const {
-		states: { keyboardIsOpen, activeSnapPoint: localActiveSnapPoint, drawerId, openDrawerIds },
+		states: {
+			keyboardIsOpen,
+			activeSnapPoint: localActiveSnapPoint,
+			drawerId,
+			openDrawerIds,
+			isOpen,
+		},
 		methods: { closeDrawer, openDrawer },
 		options: { dismissible: localDismissible },
 		updateOption,
@@ -81,6 +87,9 @@
 	$: updateOption("backgroundColor", backgroundColor);
 	$: updateOption("dismissible", dismissible);
 	$: updateOption("direction", direction);
+
+	$: open && !$isOpen && openDrawer();
+	$: !open && $isOpen && closeDrawer();
 </script>
 
 <DialogPrimitive.Root