document.getElementById("box").focus() not focusing on element

Question

Seeing if anyone can help me figure out why my element isn't focusing.

I'm using RiotJS events and tags. But I don't think this problem has to do with Riot since I tried it with an element on the DOM and pure JS and it still doesn't work.

In the console, when I ask for document.activeElement it gives me <input tabindex="0" id="box" type="text" placeholder="Search"> but it's not focused.

What's weirder is that I made an onblur function that focused back on the element onblur and it works! But when I tried tying it to the click [so I can trigger it via app.search.box.click();], it doesn't work.

I've googled a LOT and have tried a LOT of the suggestions on how to do this with pure JS.

I'm on OSX Yosemite. Using latest Chrome, Firefox AND Safari. No luck on anything. Please advise.

Here's my search.tag code:

<search>
  <a href="javascript:void(0)" id="close" onclick={ close }><i class="fa-remove fa"></i></a>

  <div class="elements">

    <input tabindex="0" id="box" type="text" placeholder="Search things" onkeyup={ search } onclick={ focusBox } />

    <span id="loading" class="hide"><i class="fa fa-gear fa-spin"></i></span>

    <a id="searchButton" href="javascript:void(0)" name="search">
      <i class="fa fa-arrow-right"></i>
    </a>

  </div>


  <script>
    this.search = function(event) {
      app.search.trigger('search', event, box.value);
    }

    this.close = function(event) {
      app.search.trigger('close');
    }

    this.focusBox = function(event){
      var element = event.target || event.srcElement;
      window.setTimeout(function() {element.focus()}, 1000);
    }


  </script>

</search>

Here's the search.js code that triggers the open:

search.open = function(event) {
  search.container.classList.remove('hide');
  search.container.classList.remove('closed');
  search.box.focus();
}