twitter-bootstrap-modal

Demostrating issues #143 and #144 in bootstrap-select.

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css">
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
    <div class="container">

        <h3>Inputting proble</h3>

        <!-- Button to trigger modal -->
        <div>
            <a href="#myModal1" role="button" class="btn" data-toggle="modal">Launch Modal</a>
            <p>
            Now you are able to enter text in the input field below. Once tested, open the modal.
            </p>
        </div>

        <!-- Modal -->
        <div id="myModal1" class="modal hide" tabindex="-1" role="dialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Ă—</button>
                <h3>Modal</h3>
            </div>
            <div class="modal-body">
              <p>Now you will not be able to enter text in the input</p>
            </div>
            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
            </div>
        </div>
    </div>
    
    <ul role="menu">
    <li><a href="#">Link 1</a></li>
    <li role="separator" class="divider"></li>
    <li><input type="text" name="filter"></li>
    <li style="height:200px;" class="scroll-container-y">
        <ul class="list-unstyled gutter-left-small">
            <li><a href="#">Sublink 1</a></li>
            <li><a href="#">Sublink 2</a></li>
            <li><a href="#">Sublink 3</a></li>
        </ul>
    </li>
</ul>

<style>

CSS

.btn-group {
    z-index: 1051;
}

ul[role="menu"]{
  position: absolute; 
  left: 50px; 
  top: 400px;
  z-index: 999999;
  border: 1px solid black;
}

JavaScript

$('#myModal1').on('shown', function() {
    $(document).off('focusin.modal');
});