CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapbootstrap-modal
Alejandro Maguey
Alejandro Maguey

Reputation: 186

Prevent input inside a bootstrap modal losing focus when click on modal's scrollbar

I have an input inside a modal. If the input has focus and i click on the modal's scrollbar the input loses focus. How can i prevent this to occur?

Browsers default behavior is to not remove inputs focus when you click on a scrollbar, however inside a bootstrap modal this is not happening.

Example:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>



<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  
                </form>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
            
        </div>
    </div>
</div>

Upvotes: 1

Views: 2990

Answers (3)

David L Ernstrom
David L Ernstrom

Reputation: 459

This is how I dealt with the errant tabindex attribute:

let create_modal = $('#create-modal');
create_draft_asset_modal.on('show.bs.modal', function (e) {
    create_modal.removeAttr('tabindex');
}).on('hidden.bs.modal', function (e) {
    create_modal.attr('tabindex', '-1');
});

Upvotes: 0

Lopsan Osorio
Lopsan Osorio

Reputation: 123

it's browser behavior caused by the modal's container having the tabindex="-1" attribute.

I suppose an ugly workaround would be to listen for the blur event. If the modal is still open and nothing within the modal has focus, return the focus

Upvotes: 3

evgeni fotia
evgeni fotia

Reputation: 4810

Not the perfect answer

var inputs = document.getElementById('myModalNorm').getElementsByTagName('input');

var focused;

for(let i=0; i<inputs.length; i++){
inputs[i].addEventListener('focus', function(){
  focused = document.activeElement;
});
}

document.getElementById('myModalNorm').addEventListener('scroll', function(){
  if(focused){
    focused.focus();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet"/>



<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
    Launch Form
</button>

<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog" 
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" 
                   data-dismiss="modal">
                       <span aria-hidden="true">&times;</span>
                       <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    Modal title
                </h4>
            </div>
            
            <!-- Modal Body -->
            <div class="modal-body">
                
                <form role="form">
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                      <input type="email" class="form-control"
                      id="exampleInputEmail1" placeholder="Enter email"/>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                      <input type="password" class="form-control"
                          id="exampleInputPassword1" placeholder="Password"/>
                  </div>
                  
                </form>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
            
        </div>
    </div>
</div>

Upvotes: 1

Related Questions