From f85af8e88f6d605a91a7b4bd1013cd05d38419d5 Mon Sep 17 00:00:00 2001
From: Vinh <vinh@vinh.tech>
Date: Fri, 8 Nov 2019 01:44:10 +0700
Subject: [PATCH] [CORL-684] Fix scrolling bug in overflowing modal (#2682)

* fix: scrolling bug in overflowing modal

* fix: tests
---
 .../ui/components/Backdrop/Backdrop.css       |  4 +-
 .../ui/components/Backdrop/Backdrop.tsx       |  1 -
 src/core/client/ui/components/Modal/Modal.css |  1 -
 src/core/client/ui/components/Modal/Modal.tsx | 21 +++++-----
 .../Modal/__snapshots__/Modal.spec.tsx.snap   | 41 ++++++++++---------
 5 files changed, 34 insertions(+), 34 deletions(-)

diff --git a/src/core/client/ui/components/Backdrop/Backdrop.css b/src/core/client/ui/components/Backdrop/Backdrop.css
index 7517851e1..50d0bcf16 100644
--- a/src/core/client/ui/components/Backdrop/Backdrop.css
+++ b/src/core/client/ui/components/Backdrop/Backdrop.css
@@ -1,6 +1,6 @@
 .root {
   display: none;
-  background: black;
+  background: rgba(0, 0, 0, 1.0);
   position: fixed;
   /* fix to bottom solves some mobile scrolling issues. */
   bottom: 0;
@@ -11,5 +11,5 @@
 
 .active {
   display: block;
-  opacity: 0.5;
+  background: rgba(0, 0, 0, 0.5);
 }
diff --git a/src/core/client/ui/components/Backdrop/Backdrop.tsx b/src/core/client/ui/components/Backdrop/Backdrop.tsx
index b97bb24fd..37f7551f2 100644
--- a/src/core/client/ui/components/Backdrop/Backdrop.tsx
+++ b/src/core/client/ui/components/Backdrop/Backdrop.tsx
@@ -18,7 +18,6 @@ const Backdrop: FunctionComponent<Props> = ({
   classes,
   active,
   className,
-  children,
   ...rest
 }) => {
   const rootClassName = cn(
diff --git a/src/core/client/ui/components/Modal/Modal.css b/src/core/client/ui/components/Modal/Modal.css
index 92b04ca37..c2e74ec19 100644
--- a/src/core/client/ui/components/Modal/Modal.css
+++ b/src/core/client/ui/components/Modal/Modal.css
@@ -9,7 +9,6 @@
 }
 
 .scroll {
-  pointer-events: none;
   position: relative;
   overflow-y: auto;
   width: 100%;
diff --git a/src/core/client/ui/components/Modal/Modal.tsx b/src/core/client/ui/components/Modal/Modal.tsx
index d72bc5d99..ad7ed4165 100644
--- a/src/core/client/ui/components/Modal/Modal.tsx
+++ b/src/core/client/ui/components/Modal/Modal.tsx
@@ -107,20 +107,21 @@ const Modal: FunctionComponent<Props> = ({
           active={open}
           data-testid="backdrop"
           onClick={handleBackdropClick}
-        />
-        <div
-          role="presentation"
-          className={styles.scroll}
-          onKeyDown={handleEscapeKeyDown}
         >
-          <div className={styles.alignContainer1}>
-            <div className={styles.alignContainer2}>
-              <div className={styles.wrapper}>
-                <TrapFocus>{children}</TrapFocus>
+          <div
+            role="presentation"
+            className={styles.scroll}
+            onKeyDown={handleEscapeKeyDown}
+          >
+            <div className={styles.alignContainer1}>
+              <div className={styles.alignContainer2}>
+                <div className={styles.wrapper}>
+                  <TrapFocus>{children}</TrapFocus>
+                </div>
               </div>
             </div>
           </div>
-        </div>
+        </Backdrop>
       </div>,
       modalDOMNode
     );
diff --git a/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap b/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
index 380445832..6b1b4dad2 100644
--- a/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
+++ b/src/core/client/ui/components/Modal/__snapshots__/Modal.spec.tsx.snap
@@ -9,35 +9,36 @@ exports[`renders correctly 1`] = `
     className="Backdrop-root Backdrop-active"
     data-testid="backdrop"
     onClick={[Function]}
-  />
-  <div
-    className="Modal-scroll"
-    onKeyDown={[Function]}
-    role="presentation"
   >
     <div
-      className="Modal-alignContainer1"
+      className="Modal-scroll"
+      onKeyDown={[Function]}
+      role="presentation"
     >
       <div
-        className="Modal-alignContainer2"
+        className="Modal-alignContainer1"
       >
         <div
-          className="Modal-wrapper"
+          className="Modal-alignContainer2"
         >
           <div
-            onFocus={[Function]}
-            tabIndex={0}
-          />
-          <div
-            tabIndex={-1}
-          />
-          <div>
-            Test
+            className="Modal-wrapper"
+          >
+            <div
+              onFocus={[Function]}
+              tabIndex={0}
+            />
+            <div
+              tabIndex={-1}
+            />
+            <div>
+              Test
+            </div>
+            <div
+              onFocus={[Function]}
+              tabIndex={0}
+            />
           </div>
-          <div
-            onFocus={[Function]}
-            tabIndex={0}
-          />
         </div>
       </div>
     </div>