New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[@mantine/core] Modal: Overlay respects scrollbar #2669
[@mantine/core] Modal: Overlay respects scrollbar #2669
Conversation
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.
Click outside events should be handled by |
@rtivital May I know what was the exact reason for switching to As I can tell based on #2611 the reason You may refer to the video below: google_screen_recording_2022-10-09T16-17_06.146Z.webm |
As far as I remember, it did not work with elements that were rendered within portal, for example |
So in the video I showed, I have |
Alright, I've checked, it seems to be working fine, thanks for the fix and investigation |
No worries. Glad to help! |
Thanks! |
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.