Focus input on button click using bootstrap

Question

Bootstrap 4 collapse example code mostly. https://getbootstrap.com/docs/4.0/components/collapse/

<p>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    <input type="text" name="test" id="test-id">
  </div>
</div>

There is a hidden div with an input field that reveals when you click the button, how can I focus the input when someone clicks on the button? using JS onlick seems to interrupt collapse ability from bootstrap.

berkobienb berkobienb · Accepted Answer · 2020-11-18T21:40:52

Make sure that you have added the jQuery (3.5.1 preferably) library before your bootstrap.js and bootstrap.css and use its focus() function within a setTimeout() function. This will focus on the input after a certain number of milliseconds of the button being clicked.

Here is a fiddle that shows it working (focusing after 1 second):

https://jsfiddle.net/bradberkobien/z5wr96Lt/18/

Focus input on button click using bootstrap

1 Answers