在Bootstrap模态窗口中选择在Firefox中不起作用

Question

I want to make a modal window, in which i choose an option from form select and pass it for further functionallity. The problem is, that when the select list drops down, i can't change the selected option. This problem occures only in Firefox. In Chrome it seems working well.

Below is the code, that i used in my application. I don't have any additional styles or scripts, besides thoose from Bootstrap.

 <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> <div> <select class="form-control" > <option selected>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" id='generate'>Generate</button> </div> </div> </div> </div> 

Answer 1

I removed the attribute tabindex="-1" (or sets to 0) of the modal, and I added javascript:

$.fn.modal.Constructor.prototype.enforceFocus = $.noop;

https://github.com/select2/select2/issues/4091#issuecomment-172633858 ->

Solution : https://github.com/select2/select2/issues/600#issuecomment-102857595