Modals incorrectly dismissed by mouse release

Bug description:

When you have a modal dialog that includes text which is expected to be copied with the mouse, users (inc. me) often somewhat imprecisely select the text and end up with the mouse outside of the modal dialog. They then release the mouse button used to select the text.

With ng-bootstrap modals this results in the unexpected behaviour of the whole modal gets dismissed.

I think the ideal solution would probably be to not listen for (click) in NgbModalWindow, and instead listen for (mousedown) events.

‘(click)’: ‘backdropClick($event)’

As a work-around I can disable the background click detection (option ‘backdrop’), but it would be nice to still support that.

Link to minimally-working plunker that reproduces the issue:

You can see the issue with modal

Launch the first modal, then select all of the text (‘One fine body…’) and end with the mouse just outside the modal before you release the mouse button.

Version of Angular, ng-bootstrap, and Bootstrap:

Angular: 4.4.6

ng-bootstrap: 1.0.0-beta.5

Bootstrap: 4.0.0-beta.2

Browsers:
Microsoft Edge 40.15063.674.0 (Win)
Microsoft IE 11.674 (Win)
Chrome Version 61.0.3163.100 (Win)
Chrome 61.0.3163.100 (Mac)

Firefox 56.0 Mac does not exhibit the problem
Safari 11.0.1 Mac does not exhibit the problem

2 thoughts on “Modals incorrectly dismissed by mouse release

  1. Any updates on this or fixes? It would be sweet to detect if the mouse click+release occurs outside of the modal, instead of starting within the modal and releasing outside of it.

    The main use case I’ve seen is when a user is selecting text within an input field and then releases their mouse outside of the modal, which closes it.