From 70fe3b97733bf798013bc8918d95858533f099ea Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 29 Nov 2025 11:47:36 +0200
Subject: [PATCH] fix(quick_edit): block popup not working

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

diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx
index 38a9e86f0..8d566a404 100644
--- a/apps/client/src/widgets/dialogs/PopupEditor.tsx
+++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx
@@ -67,6 +67,7 @@ export default function PopupEditor() {
                     }}
                     onHidden={() => setShown(false)}
                     keepInDom // needed for faster loading
+                    noFocus // automatic focus breaks block popup
                 >
                     <ReadOnlyNoteInfoBar />
                     <PromotedAttributes />
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index 695de6793..9c1e4a230 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -66,9 +66,13 @@ interface ModalProps {
      * 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;
+    /**
+     * If true, the modal will not focus itself after becoming visible.
+     */
+    noFocus?: 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, keepInDom }: 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, noFocus }: ModalProps) {
     const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
     const modalInstanceRef = useRef<BootstrapModal>();
     const elementToFocus = useRef<Element | null>();
@@ -100,13 +104,15 @@ export default function Modal({ children, className, size, title, header, footer
     useEffect(() => {
         if (show && modalRef.current) {
             elementToFocus.current = document.activeElement;
-            openDialog($(modalRef.current), !stackable).then(($widget) => {
+            openDialog($(modalRef.current), !stackable, {
+                focus: !noFocus
+            }).then(($widget) => {
                 modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
             })
         } else {
             modalInstanceRef.current?.hide();
         }
-    }, [ show, modalRef.current ]);
+    }, [ show, modalRef.current, noFocus ]);
 
     // Memoize styles to prevent recreation on every render
     const dialogStyle = useMemo<CSSProperties>(() => {