title: How to set autofocus on button inside modal everytime modal pops up?
body: <p>I am using Vue.js 2 to show Bootstrap modal. Below is an example.</p>
  
  <pre><code>&lt;div class="modal fade" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                  &lt;button type="button" autofocus class="btn btn-primary"&gt;Always focus&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The idea is that when modal pops up, user should be enable to press the <code>Enter</code> key to click on the <code>Always focus</code> button without using mouse. And when user press the <code>left</code> or <code>right</code> arrow button, that the focus switch from <code>Always focus</code> button to the <code>Close</code> button and vice versa.</p>
  
  <p>With <code>autofocus</code> attribute, it works well but only if modal pops up for the every first time. For second time the modal pops up, the <code>Always focus</code> button loses focus.</p>
  
  <p>How can I make the <code>Always focus</code> button always have focus everytime modal pops up? Or How can I realize the idea using whatever CSS-solution, JavaScript-solution or Vue-solution?</p>
  
  <p>Note that I am using Vue.js 2. Any Vue.js solution is also welcome, but not jQuery.</p>