fix: modal problem

- fixed an issue where the content of the Confirmation modal disappeared when the browser was resized.
- removed unexpected scrollbar.
- resize parent modal' height when showing child modal.

src/components/Modal/ConfirmationModal/index.tsx

@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 import Button from "components/Button";
 import Modal from "components/Modal";
 import { MOBILE_SCREEN_CLASS, MODAL_CLOSE_TIMEOUT_MS } from "constants/layout";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useScreenClass } from "react-grid-system";
 
 const Content = styled.div`
@@ -13,10 +13,7 @@ const Content = styled.div`
   & .cm-hidden {
     display: none;
   }
-  & button,
-  & input {
-    pointer-events: none;
-  }
+  pointer-events: none;
 `;
 
 interface ConfirmationModalProps extends Omit<ReactModal.Props, "children"> {
@@ -33,19 +30,23 @@ function ConfirmationModal({
 }: ConfirmationModalProps) {
   const divRef = useRef<HTMLDivElement>(null);
   const screenClass = useScreenClass();
+
+  const [contentHTML, setContentHTML] = useState("");
+
   useEffect(() => {
-    if (divRef.current) {
-      divRef.current.innerHTML = "";
-      if (node) {
-        divRef.current.appendChild(node);
-        const inputs = divRef.current.getElementsByTagName("input");
-        Array.from(inputs).forEach((elInput) => {
-          // eslint-disable-next-line no-param-reassign
-          elInput.size = elInput.value.length;
-        });
-      }
+    if (node) {
+      const elDiv = document.createElement("div");
+      elDiv.appendChild(node);
+      const inputs = elDiv.getElementsByTagName("input");
+      Array.from(inputs).forEach((elInput) => {
+        // eslint-disable-next-line no-param-reassign
+        elInput.size = elInput.value.length;
+        elInput.setAttribute("value", elInput.value);
+      });
+      setContentHTML(elDiv.innerHTML);
     }
-  }, [node, modalProps.isOpen]);
+  }, [node]);
+
   return (
     <Modal
       {...modalProps}
@@ -72,7 +73,11 @@ function ConfirmationModal({
       hasCloseButton={screenClass === MOBILE_SCREEN_CLASS}
       onGoBack={modalProps.onRequestClose}
     >
-      <Content ref={divRef} className="cm" />
+      <Content
+        ref={divRef}
+        className="cm"
+        dangerouslySetInnerHTML={{ __html: contentHTML }}
+      />
       <Button
         block
         size="large"

src/components/Modal/index.tsx

@@ -86,6 +86,7 @@ function Modal({
   gradient,
   style,
   headerExtra,
+  contentRef: _contentRef,
   className: _className,
   overlayClassName: _overlayClassName,
   ...modalProps
@@ -96,6 +97,35 @@ function Modal({
     () => !!modalProps.parentSelector,
     [modalProps.parentSelector],
   );
+  const elParent = useMemo(() => {
+    return modalProps.parentSelector?.();
+  }, [modalProps]);
+
+  const [elContent, setElContent] = useState<HTMLDivElement>();
+
+  useEffect(() => {
+    const originalMinHeight = elParent?.style.minHeight;
+    const handleResize = () => {
+      if (elParent && elContent) {
+        elParent.style.setProperty("min-height", `${elContent.scrollHeight}px`);
+      }
+    };
+    handleResize();
+    let resizeObserver: ResizeObserver;
+    if (elContent) {
+      resizeObserver = new ResizeObserver(handleResize);
+      resizeObserver.observe(elContent);
+    }
+
+    return () => {
+      if (elParent) {
+        elParent.style.setProperty("min-height", originalMinHeight || "");
+      }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
+    };
+  }, [elParent, elContent]);
 
   const overlayClassName = useMemo(() => {
     const additionalClasses = [];
@@ -140,7 +170,7 @@ function Modal({
       if (resizeTrigger) {
         setResizeTrigger(false);
       }
-    }, 1);
+    }, 100);
     return () => {
       clearTimeout(timerId);
     };
@@ -205,6 +235,12 @@ function Modal({
           ...style?.content,
         },
       }}
+      contentRef={(instance) => {
+        if (_contentRef) {
+          _contentRef(instance);
+        }
+        setElContent(instance);
+      }}
       {...modalProps}
     >
       <Container

src/styles/GlobalStyles/index.tsx

@@ -21,7 +21,7 @@ function GlobalStyles() {
 
           #root {
             & > div {
-              overflow-x: hidden;
+              overflow: hidden;
             }
           }