Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Dialog] Releasing body scrollbar closes the dialog

See original GitHub issue

Dialogs with scroll="body" prop get closed when users press and release on the body scrollbar.

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce 🕹

https://codesandbox.io/s/scrollbody-dialog-is-closed-when-scrollbar-is-used-ljyxb?file=/demo.tsx

Context 🔦

I have found a similar old issue for ClickAwayListener. The solution there was to use onClick event instead of onMouseUp event.

I see that recently Dialog was made to use onMouseUp instead of onClick because of NVDA screen reader. Reverting this change fixes the issue.

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0
React	v16.13.1
Browser	Chrome 83.0.4103.116

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

ruhci28commented, Jul 16, 2020

hye can i work on this .?

0reactions

imhazigecommented, Aug 11, 2022

I found another related bug of “@mui/material”: “^5.5.1”, when drag the scrollbar to scroll and then click some element in the dialog, the onclose event will trigger make the dialog close.

Top Results From Across the Web

[Dialog] Releasing body scrollbar closes the dialog #21694

Dialogs with scroll="body" prop get closed when users press and release on the body scrollbar. The issue is present in the latest release....

Issue: Material UI Dialog control is hiding window scroll [closed]

@AndrewT. It's reproducible, Just open a dialog if there is any window scroll in your page.After opening dialog, it will collapse the scroll...

Disable body-level scrolling when a dialog is open as a modal

When a dialog is opened with the "modal" option, all other elements on the page are hypothetically disabled.

Dialog (Modal) - Headless UI

Focus will be moved inside the dialog and trapped there as the user cycles through the focusable elements. Scroll is locked, the rest...

Customize Window Appearance Dialog Box - NI

If you turn off the vertical scroll bar by right-clicking the scroll bar in the front panel window and selecting Vertical Scrollbar»Always Off, ......