From 2945184b0707a95bd2a7421f029021b647c89bf5 Mon Sep 17 00:00:00 2001
From: Nick Funk <nick.funk@outlook.com>
Date: Wed, 13 Nov 2019 09:00:55 -0700
Subject: [PATCH] Stop propagation of Modal content click events (#2706)

This prevents the click event from propagating out to
the backdrop parent and auto-closing the modal on any
content click.

CORL-765
---
 src/core/client/ui/components/Modal/Modal.tsx            | 9 ++++++++-
 .../components/Modal/__snapshots__/Modal.spec.tsx.snap   | 2 ++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/core/client/ui/components/Modal/Modal.tsx b/src/core/client/ui/components/Modal/Modal.tsx
index ad7ed4165..ac201f23b 100644
--- a/src/core/client/ui/components/Modal/Modal.tsx
+++ b/src/core/client/ui/components/Modal/Modal.tsx
@@ -98,6 +98,9 @@ const Modal: FunctionComponent<Props> = ({
     },
     [onBackdropClick, onClose]
   );
+  const handleWrapperClick = useCallback((e: React.MouseEvent) => {
+    e.stopPropagation();
+  }, []);
 
   if (open && modalDOMNode) {
     return ReactDOM.createPortal(
@@ -115,7 +118,11 @@ const Modal: FunctionComponent<Props> = ({
           >
             <div className={styles.alignContainer1}>
               <div className={styles.alignContainer2}>
-                <div className={styles.wrapper}>
+                <div
+                  className={styles.wrapper}
+                  role="presentation"
+                  onClick={handleWrapperClick}
+                >
                   <TrapFocus>{children}</TrapFocus>
                 </div>
               </div>
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 6b1b4dad2..a8ac4e4be 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
@@ -23,6 +23,8 @@ exports[`renders correctly 1`] = `
         >
           <div
             className="Modal-wrapper"
+            onClick={[Function]}
+            role="presentation"
           >
             <div
               onFocus={[Function]}