Close dialog by clicking outside

src/Components/CreateSchemaDialog.tsx

@@ -10,7 +10,7 @@ import ExplorerFolder from "./ExplorerFolder";
 import Spinner from "./Spinner";
 import { invalidCharsRegex, newFileTemplate, tshetUinhExamplesURLPrefix } from "../consts";
 import samples from "../samples";
-import { fetchFile, normalizeFileName } from "../utils";
+import { fetchFile, normalizeFileName, stopPropagation } from "../utils";
 
 import type { Folder, Sample, SchemaState } from "../consts";
 import type { ChangeEventHandler, FormEvent, RefObject } from "react";
@@ -267,8 +267,8 @@ const CreateSchemaDialog = forwardRef<HTMLDialogElement, CreateSchemaDialogProps
   );
 
   return createPortal(
-    <Container ref={ref} onClose={resetDialog}>
-      <Popup>
+    <Container ref={ref} onClick={closeDialog} onClose={resetDialog}>
+      <Popup onClick={stopPropagation}>
         <Title>新增方案</Title>
         <Explorer>
           <ul>

src/Components/Main.tsx

@@ -14,6 +14,7 @@ import evaluate from "../evaluate";
 import { listenArticle } from "../options";
 import initialState, { stateStorageLocation } from "../state";
 import TooltipLabel from "./TooltipLabel";
+import { stopPropagation } from "../utils";
 
 import type { MainState, Option, ReactNode } from "../consts";
 import type { MutableRefObject } from "react";
@@ -161,6 +162,9 @@ export default function Main({ evaluateHandlerRef }: { evaluateHandlerRef: Mutab
   const [operation, increaseOperation] = useReducer((operation: number) => operation + 1, 0);
 
   const dialogRef = useRef<HTMLDialogElement>(null);
+  const closeDialog = useCallback(() => {
+    dialogRef.current?.close();
+  }, []);
   evaluateHandlerRef.current = useCallback(async () => {
     evaluationResult = [];
     dialogRef.current?.showModal();
@@ -169,11 +173,11 @@ export default function Main({ evaluateHandlerRef }: { evaluateHandlerRef: Mutab
       evaluationResult = await evaluate(state);
       increaseOperation();
     } catch {
-      dialogRef.current?.close();
+      closeDialog();
     } finally {
       setLoading(false);
     }
-  }, [state]);
+  }, [state, closeDialog]);
 
   const [loading, setLoading] = useState(false);
 
@@ -292,8 +296,8 @@ export default function Main({ evaluateHandlerRef }: { evaluateHandlerRef: Mutab
         evaluateHandlerRef={evaluateHandlerRef}
       />
       {createPortal(
-        <OutputContainer ref={dialogRef}>
-          <OutputPopup>
+        <OutputContainer onClick={closeDialog} ref={dialogRef}>
+          <OutputPopup onClick={stopPropagation}>
             <Title>
               <span>推導結果</span>
               {!loading && (

src/Components/Tooltip.tsx

@@ -3,6 +3,8 @@ import { createRoot } from "react-dom/client";
 
 import { css as stylesheet } from "@emotion/css";
 
+import { stopPropagation } from "../utils";
+
 import type { ReactElement, SyntheticEvent } from "react";
 
 function getPageWidth() {
@@ -34,6 +36,7 @@ const fixedWidthStyle = stylesheet`
 `;
 
 const div = document.getElementById("tooltip") ?? document.createElement("div");
+div.addEventListener("click", stopPropagation);
 div.id = "tooltip";
 div.style.visibility = "hidden";
 div.className = tooltipStyle;

src/utils.tsx

@@ -4,6 +4,7 @@ import styled from "@emotion/styled";
 import Swal from "./Classes/SwalReact";
 import Spinner from "./Components/Spinner";
 
+import type { SyntheticEvent } from "react";
 import type { SweetAlertOptions } from "sweetalert2";
 
 const LoadModal = styled.div`
@@ -119,3 +120,7 @@ export function displaySchemaLoadingErrors(errors: unknown[], nSchemas: number)
     notifyError(nSchemas === 1 ? "無法載入方案" : "1 個方案無法載入", errors[0]);
   }
 }
+
+export function stopPropagation(event: Event | SyntheticEvent) {
+  event.stopPropagation();
+}