fix: Close edit modal when backdrop clicked

hata6502 · Jan 28, 2021 · e426d07 · e426d07
1 parent 7bd4ee9
commit e426d07
Showing 1 changed file with 13 additions and 0 deletions.
diff --git a/src/itemContent/createDialog.ts b/src/itemContent/createDialog.ts
@@ -16,6 +16,8 @@ const createDialog = ({
   const dialog = document.createElement("dialog");
 
   dialog.style.maxWidth = "960px";
+  // Make be not able to click inner
+  dialog.style.padding = "0";
   dialog.style.top = "32px";
   dialog.style.width = "calc(100% - 64px)";
 
@@ -32,11 +34,22 @@ const createDialog = ({
     data,
   });
 
+  const handleDialogClick = (event: MouseEvent) => {
+    if (!(event.target instanceof Node) || !event.target.isEqualNode(dialog)) {
+      return;
+    }
+
+    dialog.close();
+  };
+
+  dialog.addEventListener("click", handleDialogClick);
+
   const handleDialogClose = async () => {
     const editorJSData = await editorJS.save();
 
     editorJS.destroy();
 
+    dialog.removeEventListener("click", handleDialogClick);
     dialog.removeEventListener("close", handleDialogClose);
     dialog.remove();