fix: modal outside click only on mouse down (#1160)

* modal outside click only on mouse down

* rename function

---------

Co-authored-by: tommygiesbrecht <[email protected]>

src/lib/modal/Modal.svelte

@@ -92,6 +92,10 @@
   const onAutoClose = (e: MouseEvent) => {
     const target: Element = e.target as Element;
     if (autoclose && target?.tagName === 'BUTTON') hide(e); // close on any button click
+  };
+
+  const onOutsideClose = (e: MouseEvent) => {
+    const target: Element = e.target as Element;
     if (outsideclose && target === e.currentTarget) hide(e); // close on click outside
   };
 
@@ -117,7 +121,7 @@
   <div class={backdropCls} />
   <!-- dialog -->
   <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} class={twMerge(dialogClass, $$props.classDialog, ...getPlacementClasses())} tabindex="-1" aria-modal="true" role="dialog">
+  <div on:keydown={handleKeys} on:wheel|preventDefault|nonpassive use:prepareFocus use:focusTrap on:click={onAutoClose} on:mousedown={onOutsideClose} class={twMerge(dialogClass, $$props.classDialog, ...getPlacementClasses())} tabindex="-1" aria-modal="true" role="dialog">
     <div class="flex relative {sizes[size]} w-full max-h-full">
       <!-- Modal content -->
       <Frame rounded shadow {...$$restProps} class={frameClass}>