ダイアログの外側をクリックして閉じる

narumincho · Jul 7, 2024 · 0cb8e3d · 0cb8e3d
1 parent 2f7816f
commit 0cb8e3d
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/client/SignUpDialog.tsx b/client/SignUpDialog.tsx
@@ -14,8 +14,17 @@ export const SignUpDialog = (props: {
 
   useEffect(() => {
     ref.current?.addEventListener("close", props.onClose);
+    const clickHandler = (event: MouseEvent) => {
+      if (event.target instanceof HTMLElement) {
+        if (event.target.closest("form") === null) {
+          props.onClose();
+        }
+      }
+    };
+    ref.current?.addEventListener("click", clickHandler);
     return () => {
       ref.current?.removeEventListener("close", props.onClose);
+      ref.current?.removeEventListener("click", clickHandler);
     };
   }, [props.onClose, ref.current]);