From 3627a7dc9351a5c26e34456a5e81c793761907d2 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 27 Aug 2025 19:35:47 +0300
Subject: [PATCH] refactor(react/dialogs): allow modals in sub-components

---
 apps/client/src/widgets/react/Modal.tsx | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index e97914a45..f13257a5d 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -1,9 +1,8 @@
-import { useContext, useEffect, useRef, useMemo } from "preact/hooks";
+import { useEffect, useRef, useMemo } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { ComponentChildren } from "preact";
 import type { CSSProperties, RefObject } from "preact/compat";
 import { openDialog } from "../../services/dialog";
-import { ParentComponent } from "./react_utils";
 import { Modal as BootstrapModal } from "bootstrap";
 import { memo } from "preact/compat";
 import { useSyncedRef } from "./hooks";
@@ -68,7 +67,6 @@ interface 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 }: ModalProps) {
     const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
     const modalInstanceRef = useRef<BootstrapModal>();
-    const parentWidget = useContext(ParentComponent);
     const elementToFocus = useRef<Element | null>();
 
     useEffect(() => {
@@ -94,18 +92,15 @@ export default function Modal({ children, className, size, title, header, footer
     }, [ onShown, onHidden ]);
 
     useEffect(() => {
-        if (!parentWidget) {
-            return;
-        }
-        if (show) {
+        if (show && modalRef.current) {
             elementToFocus.current = document.activeElement;
-            openDialog(parentWidget.$widget, !stackable).then(($widget) => {
+            openDialog($(modalRef.current), !stackable).then(($widget) => {
                 modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
             })
         } else {
             modalInstanceRef.current?.hide();
         }
-    }, [ show ]);
+    }, [ show, modalRef.current ]);
 
     // Memoize styles to prevent recreation on every render
     const dialogStyle = useMemo<CSSProperties>(() => {