From 4cc545659b7c567ecc9278d3209832f6b2067e7d Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 24 Nov 2025 19:38:18 +0200
Subject: [PATCH] fix(popup_editor): keep in DOM

---
 apps/client/src/widgets/dialogs/PopupEditor.tsx | 1 +
 apps/client/src/widgets/react/Modal.tsx         | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx
index fba5aab5a..a9c6b75ab 100644
--- a/apps/client/src/widgets/dialogs/PopupEditor.tsx
+++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx
@@ -47,6 +47,7 @@ export default function PopupEditor() {
                         parentComponent?.handleEvent("focusOnDetail", { ntxId: noteContext.ntxId });
                     }}
                     onHidden={() => setShown(false)}
+                    keepInDom // needed for faster loading
                 >
                     <PromotedAttributes />
                     <StandaloneRibbonAdapter component={FormattingToolbar} />
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index 37a0d96c0..695de6793 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -62,9 +62,13 @@ interface ModalProps {
      * 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;
+    /**
+     * If true, the modal will remain in the DOM even when not shown. This can be useful for certain CSS transitions or when you want to avoid re-mounting the modal content.
+     */
+    keepInDom?: boolean;
 }
 
-export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable }: ModalProps) {
+export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom }: ModalProps) {
     const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
     const modalInstanceRef = useRef<BootstrapModal>();
     const elementToFocus = useRef<Element | null>();
@@ -126,7 +130,7 @@ export default function Modal({ children, className, size, title, header, footer
 
     return (
         <div className={`modal fade mx-auto ${className}`} tabIndex={-1} style={dialogStyle} role="dialog" ref={modalRef}>
-            {show && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
+            {(show || keepInDom) && <div className={`modal-dialog modal-${size} ${scrollable ? "modal-dialog-scrollable" : ""}`} style={documentStyle} role="document">
                 <div className="modal-content">
                     <div className="modal-header">
                         {!title || typeof title === "string" ? (