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

@@ -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>

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]}