Focus on bootstrap-tokenfield input

Question

I would like to have focus on the tokenfield input field when the modal shows up. Currently it's focused only if I click on the input field in the modal.

https://jsfiddle.net/csisanyi/h19Lzkyr/12/

I tried to add the following code

    Mousetrap.bind('w', function() { 
  document.getElementById("keywordButton").click();
  document.getElementById("keyword-input").focus();
  }); 

I also tried to add <input autofocus> but when the tokenfield is initialized it seems like it's overriden.

I have checked the bootstrap-tokenfield documentation but input field focus is not really mentioned there.

Any suggestions?

Answer 1

I found a solution to the problem.

after the tokenfield is initialized, bootstrap-tokenfield.js appends the id of the input with -tokenfield.

So i added the following code.

https://jsfiddle.net/csisanyi/h19Lzkyr/43/

Mousetrap.bind('w', function() { 
  document.getElementById("keywordButton").click();
  setTimeout(() => {
          document.getElementById("keyword-input-tokenfield").focus();
        }, 400);
}); 

And it works with setting a minimal timeout on the focus expression.

Answer 2

Do you want the focus on the button or the input field? The ID you specified is for focusing on the button. You mention wanting the field to focus, but it doesn't seem you are calling on it. I can't make comments but will edit this as time goes on. HTML:

<div class="modal-body">
    <p class="modal_text">Add keywords.</p>
    <input class="token-input input-group-lg keywordmodalclass" id="keyword-input" type="text" name="keywords" value="" placeholder="Keywords">
</div>
<div class="modal-footer">
    <button id="saveKeyword" type="submit" class="btn btn-success" onclick="submitKeywords()">Save Keywords</button>

Jquery:

 Mousetrap.bind('w', function() { 
      document.getElementById("keywordButton").click();
      document.getElementById("keyword-input").focus();
  });