fix: closeOnOutsideClick & onOutsideClick behavior (#27)

.changeset/grumpy-gorillas-kneel.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: `closeOnOutsideClick` & `onOutsideClick` behavior

src/lib/internal/position-fixed.ts

@@ -1,6 +1,6 @@
+import { onMount } from "svelte";
 import { writable, get, type Writable } from "svelte/store";
 import { effect, addEventListener } from "./helpers/index.js";
-import { onMount } from "svelte";
 
 let previousBodyPosition: Record<string, string> | null = null;
 

src/lib/internal/snap-points.ts

@@ -1,7 +1,7 @@
+import { tick } from "svelte";
 import { derived, get, type Writable } from "svelte/store";
 import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants.js";
 import { effect, set } from "./helpers/index.js";
-import { tick } from "svelte";
 
 export function handleSnapPoints({
 	activeSnapPoint,

src/lib/vaul/components/root.svelte

@@ -14,6 +14,7 @@
 	export let fadeFromIndex: $$Props["fadeFromIndex"] = undefined;
 	export let openFocus: $$Props["openFocus"] = undefined;
 	export let onOutsideClick: $$Props["onOutsideClick"] = undefined;
+	export let closeOnOutsideClick: $$Props["closeOnOutsideClick"] = true;
 	export let nested: $$Props["nested"] = false;
 	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = false;
 	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
@@ -77,6 +78,7 @@
 </script>
 
 <DialogPrimitive.Root
+	{closeOnOutsideClick}
 	closeOnEscape={false}
 	bind:open
 	preventScroll={false}
@@ -89,7 +91,12 @@
 		}
 	}}
 	onOutsideClick={(e) => {
+		if (!closeOnOutsideClick) return;
+
 		onOutsideClick?.(e);
+
+		if (e?.defaultPrevented) return;
+
 		if ($keyboardIsOpen) {
 			keyboardIsOpen.set(false);
 		}