From 7ff9084b6330a9a6fe9cacfa33631f028b564fda Mon Sep 17 00:00:00 2001
From: Arman Attarzadeh <arman.atz@gmail.com>
Date: Tue, 11 Oct 2022 21:57:25 +0800
Subject: [PATCH] [@mantine/core] Modal: Fix issue when it was impossible to
 interact with scrollbars behind overlay (#2669)

If a modal has overflow set to outside, the overlay covers the scrollbar. This causes the modal to close by default if the scrollbar is clicked.

This fix moves the overlay outside the modal-inner container, removes the mousedown event from the overlay and instead puts an onClick handler onto the modal-inner div.

Event propagation is also stopped when clicking the modal itself so that clicking inside the modal won't close the modal. This should take care of any clickable components or components like MultiSelect that render outside the modal to work correctly.
---
 src/mantine-core/src/Modal/Modal.tsx | 98 +++++++++++++++-------------
 1 file changed, 51 insertions(+), 47 deletions(-)

diff --git a/src/mantine-core/src/Modal/Modal.tsx b/src/mantine-core/src/Modal/Modal.tsx
index c620b332779..cd432d3a62b 100644
--- a/src/mantine-core/src/Modal/Modal.tsx
+++ b/src/mantine-core/src/Modal/Modal.tsx
@@ -214,56 +214,13 @@ export function Modal(props: ModalProps) {
         }}
       >
         {(transitionStyles) => (
-          <Box id={baseId} className={cx(classes.root, className)} {...others}>
-            <div
-              className={classes.inner}
-              onKeyDownCapture={(event) => {
-                const shouldTrigger =
-                  (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';
-                shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();
-              }}
-              ref={focusTrapRef}
-            >
-              <Paper<'div'>
-                className={classes.modal}
-                shadow={shadow}
-                p={padding}
-                radius={radius}
-                role="dialog"
-                aria-labelledby={titleId}
-                aria-describedby={bodyId}
-                aria-modal
-                tabIndex={-1}
-                style={transitionStyles.modal}
-                unstyled={unstyled}
-              >
-                {(title || withCloseButton) && (
-                  <div className={classes.header}>
-                    <Text id={titleId} className={classes.title}>
-                      {title}
-                    </Text>
-
-                    {withCloseButton && (
-                      <CloseButton
-                        iconSize={16}
-                        onClick={onClose}
-                        aria-label={closeButtonLabel}
-                        className={classes.close}
-                      />
-                    )}
-                  </div>
-                )}
-
-                <div id={bodyId} className={classes.body}>
-                  {children}
-                </div>
-              </Paper>
+          <>
+            <Box id={baseId} className={cx(classes.root, className)} {...others}>
               <div style={transitionStyles.overlay}>
                 <Overlay
                   className={classes.overlay}
                   sx={{ position: 'fixed' }}
                   zIndex={0}
-                  onMouseDown={() => closeOnClickOutside && onClose()}
                   blur={overlayBlur}
                   color={
                     overlayColor ||
@@ -273,8 +230,55 @@ export function Modal(props: ModalProps) {
                   unstyled={unstyled}
                 />
               </div>
-            </div>
-          </Box>
+              <div
+                role="presentation"
+                className={classes.inner}
+                onClick={() => closeOnClickOutside && onClose()}
+                onKeyDown={(event) => {
+                  const shouldTrigger =
+                    (event.target as any)?.getAttribute('data-mantine-stop-propagation') !== 'true';
+                  shouldTrigger && event.key === 'Escape' && closeOnEscape && onClose();
+                }}
+                ref={focusTrapRef}
+              >
+                <Paper<'div'>
+                  className={classes.modal}
+                  shadow={shadow}
+                  p={padding}
+                  radius={radius}
+                  role="dialog"
+                  aria-labelledby={titleId}
+                  aria-describedby={bodyId}
+                  aria-modal
+                  tabIndex={-1}
+                  style={transitionStyles.modal}
+                  unstyled={unstyled}
+                  onClick={(event) => event.stopPropagation()}
+                >
+                  {(title || withCloseButton) && (
+                    <div className={classes.header}>
+                      <Text id={titleId} className={classes.title}>
+                        {title}
+                      </Text>
+
+                      {withCloseButton && (
+                        <CloseButton
+                          iconSize={16}
+                          onClick={onClose}
+                          aria-label={closeButtonLabel}
+                          className={classes.close}
+                        />
+                      )}
+                    </div>
+                  )}
+
+                  <div id={bodyId} className={classes.body}>
+                    {children}
+                  </div>
+                </Paper>
+              </div>
+            </Box>
+          </>
         )}
       </GroupedTransition>
     </OptionalPortal>