From a20d66a6b5f12c694b957bf21a91f90fbf585430 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 10 Aug 2025 17:37:48 +0300
Subject: [PATCH] fix(react/dialogs): some dialogs are not displayed on top

---
 apps/client/src/widgets/dialogs/confirm.tsx           | 1 +
 apps/client/src/widgets/dialogs/info.tsx              | 1 +
 apps/client/src/widgets/dialogs/note_type_chooser.tsx | 1 +
 apps/client/src/widgets/dialogs/prompt.tsx            | 1 +
 apps/client/src/widgets/react/Modal.tsx               | 8 ++++++--
 5 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/confirm.tsx b/apps/client/src/widgets/dialogs/confirm.tsx
index 28c9fcc4a..e7ced3131 100644
--- a/apps/client/src/widgets/dialogs/confirm.tsx
+++ b/apps/client/src/widgets/dialogs/confirm.tsx
@@ -54,6 +54,7 @@ function ConfirmDialogComponent() {
                 }} />
             </>}
             show={shown}
+            stackable
         >
             {!opts?.message || typeof opts?.message === "string"
                 ? <div>{(opts?.message as string) ?? ""}</div>
diff --git a/apps/client/src/widgets/dialogs/info.tsx b/apps/client/src/widgets/dialogs/info.tsx
index 5fcb4aa49..9eaf81b50 100644
--- a/apps/client/src/widgets/dialogs/info.tsx
+++ b/apps/client/src/widgets/dialogs/info.tsx
@@ -32,6 +32,7 @@ function ShowInfoDialogComponent() {
             onClick={() => setShown(false)}
         />}
         show={shown}
+        stackable
     >
         <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
     </Modal>);
diff --git a/apps/client/src/widgets/dialogs/note_type_chooser.tsx b/apps/client/src/widgets/dialogs/note_type_chooser.tsx
index f2def35b1..f7a535fe9 100644
--- a/apps/client/src/widgets/dialogs/note_type_chooser.tsx
+++ b/apps/client/src/widgets/dialogs/note_type_chooser.tsx
@@ -81,6 +81,7 @@ function NoteTypeChooserDialogComponent() {
                 setShown(false);
             }}
             show={shown}
+            stackable
         >
             <FormGroup label={t("note_type_chooser.change_path_prompt")}>
                 <NoteAutocomplete
diff --git a/apps/client/src/widgets/dialogs/prompt.tsx b/apps/client/src/widgets/dialogs/prompt.tsx
index 701b597ce..90aec4934 100644
--- a/apps/client/src/widgets/dialogs/prompt.tsx
+++ b/apps/client/src/widgets/dialogs/prompt.tsx
@@ -69,6 +69,7 @@ function PromptDialogComponent() {
             }}
             footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
             show={shown}
+            stackable
         >
             <FormGroup label={opts?.message} labelRef={labelRef}>
                 <FormTextBox
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index 024077f7b..cfb883172 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -58,9 +58,13 @@ interface ModalProps {
      * This method must generally be coupled with `onHidden` in order to detect when the modal was closed externally (e.g. by the user clicking on the backdrop or on the close button).
      */
     show: boolean;
+    /**
+     * By default displaying a modal will close all existing modals. Set this to true to keep the existing modals open instead. This is useful for confirmation modals.
+     */
+    stackable?: boolean;
 }
 
-export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle, show }: ModalProps) {
+export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle, show, stackable }: ModalProps) {
     const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
     const modalInstanceRef = useRef<BootstrapModal>();
     const formRef = _formRef ?? useRef<HTMLFormElement>(null);
@@ -94,7 +98,7 @@ export default function Modal({ children, className, size, title, header, footer
             return;
         }
         if (show) {
-            openDialog(parentWidget.$widget).then(($widget) => {
+            openDialog(parentWidget.$widget, !stackable).then(($widget) => {
                 modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
             })
         } else {