[modals] preserve data form loss by disabling auto close on escape/ou…

…tside click events

- disabling only when a onsubmit props is set
- add exceptions with a doNotPreserveData props for confirmation modals
fixes #147

src/components/modals.tsx

@@ -8,7 +8,8 @@ import { useKeyboardShortcuts } from "../hooks/useKeyboardShortcuts";
 interface Props {
   title?: ReactNode;
   onClose?: () => void;
-  onSubmit?: () => void;
+  onSubmit?: () => void; // if set echap and click outside the modal does not close it
+  doNotPreserveData?: boolean; // if set, even if a onSubmit is set it's possible to close the modal by escape/click outside to cancel
   showHeader?: boolean;
   footerAlignLeft?: boolean;
   className?: string;
@@ -20,6 +21,7 @@ interface Props {
 export const Modal: FC<PropsWithChildren<Props>> = ({
   onClose,
   onSubmit,
+  doNotPreserveData,
   title,
   children,
   showHeader = true,
@@ -36,7 +38,8 @@ export const Modal: FC<PropsWithChildren<Props>> = ({
     {
       code: "Escape",
       handler: () => {
-        if (onClose) onClose();
+        // don't close the modal on click outside if there is a form in it to avoid data loss
+        if (onClose && (doNotPreserveData || !onSubmit)) onClose();
       },
     },
   ]);
@@ -81,7 +84,9 @@ export const Modal: FC<PropsWithChildren<Props>> = ({
         className="modal fade show"
         style={{ display: "block" }}
         onClick={(e) => {
-          if (onClose && e.target === e.currentTarget) onClose();
+          // don't close the modal on click outside if there is a form in it to avoid data loss
+          // we could do better bu tracking changes but there are already a cancel AND a x icon to close the modal
+          if (onClose && (doNotPreserveData || !onSubmit) && e.target === e.currentTarget) onClose();
         }}
       >
         <div

src/views/graphPage/modals/ConfirmModal.tsx

@@ -21,6 +21,7 @@ const ConfirmModal: FC<
     <Modal
       title={title}
       onClose={() => cancel()}
+      doNotPreserveData
       onSubmit={() => {
         submit({});
         notify({ message: successMsg, type: "success" });

src/views/graphPage/modals/FunctionEditorModal.tsx

@@ -51,6 +51,7 @@ export function FunctionEditorModal<T>(props: ModalProps<FunctionEditorModalProp
         </>
       }
       onClose={() => cancel()}
+      onSubmit={() => save(true, code)}
     >
       <>
         {error && <p className="text-danger text-center">{error}</p>}
@@ -107,12 +108,7 @@ export function FunctionEditorModal<T>(props: ModalProps<FunctionEditorModalProp
           {t("common.save")}
         </button>
         {withSaveAndRun && (
-          <button
-            type="button"
-            title={t("common.save-and-run").toString()}
-            className="btn btn-primary"
-            onClick={() => save(true, code)}
-          >
+          <button type="submit" title={t("common.save-and-run").toString()} className="btn btn-primary">
             <RunIcon className="me-1" />
             {t("common.save-and-run")}
           </button>

src/views/graphPage/modals/open/RemoteFileModal.tsx

@@ -42,7 +42,12 @@ export const RemoteFileModal: FC<ModalProps<unknown>> = ({ cancel }) => {
   }, [isFormValid, url, cancel, notify, t, importFile]);
 
   return (
-    <Modal title={t("graph.open.remote.title").toString()} onClose={() => cancel()} onSubmit={openRemote}>
+    <Modal
+      title={t("graph.open.remote.title").toString()}
+      onClose={() => cancel()}
+      onSubmit={openRemote}
+      doNotPreserveData
+    >
       <>
         {fileStateType === "error" && (
           <p className="text-center text-danger">{t("graph.open.remote.error").toString()}</p>

src/views/graphPage/modals/save/ExportPNGModal.tsx

@@ -50,6 +50,7 @@ export const ExportPNGModal: FC<ModalProps<unknown>> = ({ cancel }) => {
       title={t("graph.export.png.title").toString()}
       onClose={() => cancel()}
       onSubmit={handleSubmit}
+      doNotPreserveData
       className="modal"
     >
       <>