title: twitter bootstrap modal automatically focus on first text field
body: <p>I'm using the latest version of twitter bootstrap (v3.1.1). For some reason I can't get it to focus on the first text field. Here's what I tried so far:</p>
  
  <p>add <code>autofocus</code> attribute on the text field. This works but only for the first time. The second time I try to call <code>$el.modal('show')</code> again it no longer focuses on the text field with the <code>autofocus</code> attribute.</p>
  
  <p>blur the button that was clicked to trigger the showing of modal and then call <code>.focus</code> on the text field where I want the focus:</p>
  
  <pre><code>$('#btn-link').click(function(){
      $('#btn-link').blur();
      $('#link-modal').modal('show');
      $('#link_url').focus();
  });
  </code></pre>
  
  <p>The above one doesn't work either.</p>
  
  <p>Lastly I tried the following:</p>
  
  <pre><code>$("#link-modal").on('shown', function(){ //also tried on 'show'
      console.log('yo');
      document.activeElement.blur();
      $(this).find(".modal-body :input:visible").first().focus();
  });
  </code></pre>
  
  <p>But this one doesn't work either, it doesn't focus on the text field and it doesn't even execute the <code>console.log</code>.
  Am I doing something wrong here? Thanks in advance!</p>