Modal is closed when cursor is released outside the modal after Chrome update (angularjs and bootstrap-ui)

Question

Sometimes when I want to quickly select the entire text of an input (within a modal), I begin selecting from the end of the text and move the mouse to the left until the entire text is selected and then I release.

Sometimes this release will occur outside the modal because the mouse movement is fast.

Picture describing the movement:

The problem is that the modal is closed when I release outside.

Question: how can I prevent the modal from closing when releasing outside?

I'm okay with the modal being closed with a click outside. But not okay with the release event.

I'm using:

• angularjs 1.5.8
• angular-bootstrap 2.5.0 (aka bootstrap-ui)
• bootstrap 3.3.7 (only css!!! not js, because js is provided by the above)

Update: I've created a plunkr and a GIF: https://plnkr.co/edit/mxDLAdnrQ4p0KKyw?p=info

<div class="modal-body">
  <div class="form-group">
    <label for="">Foo</label>
    <input type="text" class="form-control input-sm" ng-model="foo">

    <p>Do this: select the text from right to left and release the mouse outside the modal.</p>
  </div>
</div>

GIF:

Update 2

I have new information! This started happening after the last Goole Chrome update! I tried with another computer that had the previous version of Chrome and the modal doesn't close.

Answer 1

//prevent modal close when click starts in modal and ends on backdrop


$(document).on('mousedown', '.modal', function(e){      
    window.clickStartedInModal = $(e.target).is('.modal-dialog *');     
});

$(document).on('mouseup', '.modal', function(e){
    if(!$(e.target).is('.modal-dialog *') && window.clickStartedInModal) {
        window.preventModalClose = true;
    }           
});

$("#modal").on("hide.bs.modal", function (e) {
    if(window.preventModalClose){
        window.preventModalClose = false;
        return false;
    }     
}); 

Answer 2

The original repository has been archived and no contributions are accepted.

I forked a version and added my fixes for those who are interested:
https://github.com/peteriman/bootstrap

The comparison below:
https://github.com/angular-ui/bootstrap/compare/master...peteriman:modal-patch

=  // moved from template to fix issue #2280
-  element.on('click', scope.close);
+  var ignoreClick = false;
+  element.on('mousedown', function(evt1) {
+    element.one('mouseup', function(evt2) {
+      if (evt1.target !== evt2.target)
+        ignoreClick = true;
+    });
+  });
+  element.on('click', function(){
+    if (ignoreClick) ignoreClick = false;
+    else scope.close.apply(this, arguments);
+  });

As mousedown and mouseup events trigger before click event, the code checks if mousedown and mouseup are on the same element. If on different elements, it sets ignoreClick=true for the click event to not trigger.

Maintains backward compatibility for click event for existing codes that calls element.click() programmatically.

Original problem:
https://plnkr.co/edit/mxDLAdnrQ4p0KKyw?p=info&preview

Solution by me: (plkr, modal.js, line 103-114)
https://plnkr.co/edit/V42G9NcTUnH9n9M4?p=info&preview