Search code examples
angularjsgoogle-chromeangular-ui-bootstrap

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


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:

Picture describing the release

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:

the modal is closed when released outside

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.


Solution

  • I updated only the code referring to "Modal.js" in bootstrap.js and bootstrap.min.js

    Corrected version:

     * Bootstrap: modal.js v3.4.1
     * https://getbootstrap.com/docs/3.4/javascript/#modals
    

    bootstrap.js print