From 115094d219869984a16fb88b1c95de0f48821262 Mon Sep 17 00:00:00 2001
From: Muspi Merol <74518716+CNSeniorious000@users.noreply.github.com>
Date: Thu, 11 May 2023 01:39:37 +0800
Subject: [PATCH] fix(ui): manually implement close-on-outside-click feature
 for modals

1. use `pointer-events-auto` to allow backdrop layer to receive event
2. bind a onclick to the backdrop layer
---
 src/components/ui/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ui/Modal.tsx b/src/components/ui/Modal.tsx
index dc2d8c9d..62002c52 100644
--- a/src/components/ui/Modal.tsx
+++ b/src/components/ui/Modal.tsx
@@ -41,7 +41,7 @@ export default (props: Props) => {
       <Show when={api().isOpen}>
         <div class="fixed inset-0 z-20 fcc">
           <Portal>
-            <div {...api().backdropProps} class="fixed inset-0 bg-base opacity-60" />
+            <div {...api().backdropProps} class="fixed inset-0 bg-base opacity-60 pointer-events-auto" onclick={() => api().close()} />
           </Portal>
           <div {...api().containerProps}>
             <div {...api().contentProps} class={`bg-base-100 transition-transform ease-out max-w-screen max-h-screen overflow-auto border-base shadow-lg ${containerBaseClass}`}>