Merge pull request #12490 from ToolJet/fix/modal-viewport-gap

fix: Removes extra gap between canvas and query panel when modal is open

frontend/src/AppBuilder/Widgets/Modal.jsx

@@ -68,6 +68,54 @@ export const Modal = function Modal({
   }, [showModal, id, mode]);
   /**** End - Logic to reset the zIndex of modal control box ****/
 
+  // Side effects for modal, which include dom manipulation to hide overflow when opening
+  // And cleaning up dom when modal is closed
+
+  const onShowSideEffects = () => {
+    const canvasElement = document.querySelector('.page-container.canvas-container');
+    const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
+    const allModalContainers = realCanvasEl.querySelectorAll('.modal');
+    const modalContainer = allModalContainers[allModalContainers.length - 1];
+
+    if (canvasElement && realCanvasEl && modalContainer) {
+      const currentScroll = canvasElement.scrollTop;
+      canvasElement.style.overflowY = 'hidden';
+
+      modalContainer.style.height = `${canvasElement.offsetHeight}px`;
+      modalContainer.style.top = `${currentScroll}px`;
+      fireEvent('onOpen');
+    }
+  };
+
+  const onHideSideEffects = () => {
+    const canvasElement = document.querySelector('.page-container.canvas-container');
+    const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
+    const allModalContainers = realCanvasEl.querySelectorAll('.modal');
+    const modalContainer = allModalContainers[allModalContainers.length - 1];
+    const hasManyModalsOpen = allModalContainers.length > 1;
+
+    if (canvasElement && realCanvasEl && modalContainer) {
+      modalContainer.style.height = ``;
+      modalContainer.style.top = ``;
+      fireEvent('onClose');
+    }
+    if (canvasElement && !hasManyModalsOpen) {
+      canvasElement.style.overflow = 'auto';
+    }
+  };
+
+  // useEventListener('resize', onShowSideEffects, window);
+
+  const onShowModal = () => {
+    openModal();
+    onShowSideEffects();
+  };
+
+  const onHideModal = () => {
+    onHideSideEffects();
+    hideModal();
+  };
+
   useEffect(() => {
     const exposedVariables = {
       open: async function () {
@@ -93,58 +141,48 @@ export const Modal = function Modal({
     setShowModal(true);
   }
 
+  // Add debounced version of handleModalOpen
+  const debouncedModalOpen = debounce(() => {
+    onShowSideEffects();
+  }, 10);
+
   useEffect(() => {
-    const handleModalOpen = () => {
+    // Select the DOM element
-      openModal();
+    const canvasElement = document.querySelector('.page-container.canvas-container');
-      const canvasElement = document.getElementsByClassName('canvas-container')[0];
-      const modalBackdropEl = document.getElementsByClassName('modal-backdrop')[0];
-      const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
-      const modalCanvasEl = document.getElementById(`canvas-${id}`);
-      if (canvasElement && modalBackdropEl && modalCanvasEl && realCanvasEl) {
-        realCanvasEl.style.height = '100vh';
-        realCanvasEl.style.position = 'absolute';
-        realCanvasEl.style.overflow = 'hidden';
 
-        modalBackdropEl.style.height = '100vh';
+    if (!canvasElement) return; // Ensure the element exists
-        modalBackdropEl.style.minHeight = '100vh';
+
-        modalBackdropEl.style.minHeight = '100vh';
+    // Create a ResizeObserver
-        modalCanvasEl.style.height = modalHeight;
+    const resizeObserver = new ResizeObserver(() => {
-      }
+      debouncedModalOpen();
+    });
+
+    // Observe the canvas element
+    resizeObserver.observe(canvasElement);
+
+    return () => {
+      // Cleanup observer on component unmount
+      resizeObserver.disconnect();
     };
+  }, []);
 
-    // Add debounced version of handleModalOpen
+  useEffect(() => {
-    const debouncedModalOpen = debounce(() => {
-      handleModalOpen();
-    }, 10);
-
-    const handleModalClose = () => {
-      const canvasElement = document.getElementsByClassName('canvas-container')[0];
-      const realCanvasEl = document.getElementsByClassName('real-canvas')[0];
-      const canvasHeight = realCanvasEl?.getAttribute('canvas-height');
-
-      if (canvasElement && realCanvasEl && canvasHeight) {
-        realCanvasEl.style.height = canvasHeight;
-        realCanvasEl.style.position = '';
-
-        realCanvasEl.style.overflow = 'auto';
-      }
-    };
     if (showModal) {
       debouncedModalOpen();
     } else {
-      // if (document.getElementsByClassName('modal-content')[0] == undefined) {
+      if (document.getElementsByClassName('modal-content')[0] == undefined) {
-      handleModalClose();
+        onHideModal();
-      // }
+      }
     }
 
     // Cleanup the effect
     return () => {
       if (document.getElementsByClassName('modal-content')[0] == undefined) {
-        handleModalClose();
+        onHideModal();
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [showModal, modalHeight]);
+  }, [modalHeight, size]);
 
   useEffect(() => {
     if (isInitialRender.current) {
@@ -245,7 +283,9 @@ export const Modal = function Modal({
         keyboard={true}
         enforceFocus={false}
         animation={false}
-        onEscapeKeyDown={() => hideOnEsc && hideModal()}
+        onShow={() => onShowModal()}
+        onHide={() => onHideModal()}
+        onEscapeKeyDown={() => hideOnEsc && onHideModal()}
         id="modal-container"
         component-id={id}
         backdrop={'static'}
@@ -258,7 +298,7 @@ export const Modal = function Modal({
           titleAlignment,
           hideTitleBar,
           hideCloseButton,
-          hideModal,
+          hideModal: onHideModal,
           component,
           showConfigHandler: mode === 'edit',
         }}