Modal dialog closes when dragging and releasing mouse button outside dialog

[tdesmet]

When clicking and holding the left mouse button inside a modal dialog and then dragging the mouse outside the dialog and releasing the mouse button results in the modal dialog closing.

I have a use case where you can crop an image inside a dialog and when the users drags his mouse to far and releases the mouse button the dialog closes, causing the user to restart the process.

I know I can make the backdrop static so it doesn't close when clicking on it, but this would be a last resort.

I think that the backdrop should only close if the mousedown event happened on the backdrop and not on the dialog.

[hnrch02]

@mdo Does that sound reasonable?

[mdo]

If it can be prevented in the JS, yeah, makes sense to me to address.

[fat]

fixed

[surjithctly]

Modal box closing when clicked on Scroll bar (Chrome / Win 7). Able to scroll modal with mouse wheel, but can't scroll with scroll bar because of this fix.

[hnrch02]

@surjithctly Please open a new issue.

[cvrebert]

X-Ref: #14287.

[hnrch02]

The fix for this has been reverted due to #14263.

[lavaturtle]

This is still an issue when cropping images inside non-static modals. Doing something with stopPropagation is not an effective workaround when using a third-party cropping library like Jcrop. Temporarily making the modal static while cropping is also not workable in my use case. Are there any plans to re-fix this issue?

[Rupinderthind]

try
.modal{ pointer-events: none; .modal-dialog{ pointer-events: none; .modal-content{ pointer-events: auto; } } }

[Racle]

try
.modal{ pointer-events: none; .modal-dialog{ pointer-events: none; .modal-content{ pointer-events: auto; } } }

Just FYI, this fix breaks scrolling on chrome when modal height is more than screen height.

It's also odd, that it's usually happens on wider screen, but on smaller screen it's seems to be working just fine. Changing screen size randomly make this work, and randomly breaking.

I believe this is chrome bug, as Firefox handles pointer-events and scrolling differently, and this fix works with Firefox.

[stephen304]

Just FYI, this fix breaks scrolling on chrome when modal height is more than screen height.

This may be relevant to finding a fix, but in my case, scrolling only breaks if the page itself lacks a scroll bar. Ie, if my page doesn't scroll, the modal won't scroll. Resizing the window by 1px to give the page a scroll bar causes scrolling to work again with the modal even though the modal still exceeds the page and window height, so it doesn't seem to actually depend on the modal height, but rather the presence of a scroll bar on the page.

[mewalig]

Can anyone suggest where I can set a breakpoint that will break after the triggering event has occurred, but before the modal has closed?

Answering my own question: Modal.prototype.hide in bootstrap.js. Now to find the triggering event code...