[@mantine/core] Modal: Overlay respects scrollbar

[armanatz]

Fixes #2371

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.

And a small benefit of moving the overlay is that scrolling outside of the modal is now possible. Before, you could only scroll if the cursor was inside the modal.

[rtivital]

Click outside events should be handled by onMouseDown, onClick event will not work in all cases, we had this exact logic with onClick before and had to move to onMouseDown.

[armanatz]

Click outside events should be handled by onMouseDown, onClick event will not work in all cases, we had this exact logic with onClick before and had to move to onMouseDown.

@rtivital May I know what was the exact reason for switching to onMouseDown events?

As I can tell based on #2611 the reason onClick shouldn't be used is for components that render outside the modal (like MultiSelect) dismissing the modal when clicked on. So if that's the case, I have tested my change against that and don't seem to see that behavior happening.

You may refer to the video below:

google_screen_recording_2022-10-09T16-17_06.146Z.webm

[rtivital]

As far as I remember, it did not work with elements that were rendered within portal, for example <Select withinPortal />

[armanatz]

As far as I remember, it did not work with elements that were rendered within portal, for example <Select withinPortal />

So in the video I showed, I have <MultiSelect withinPortal /> which I assume should be the same as <Select withinPortal /> and you can see that there is no abnormal behavior occurring due to onClick handler. You may test it yourself as well and let me know if you find any problems and I will be more than happy to dig deeper :)

[rtivital]

Alright, I've checked, it seems to be working fine, thanks for the fix and investigation

[armanatz]

No worries. Glad to help!

[rtivital]

Thanks!