title: Focus an element in Aurelia
body: <p>I want to set focus to a form element. With jQuery this is so easy, just <code>$('selector').focus</code>.</p>
  
  <p>I have created a simple <code>&lt;input ref="xxx" id="xxx" type="text"&gt;</code>
   and in my .ts file I add a property and use it here:</p>
  
  <pre><code>attached() {
      this.xxx.focus()
  }
  </code></pre>
  
  <p>Nothing happens. Beginning to feel that some easy things are getting difficult, which I'm sure never was the point.</p>
  
  <p>(the original use case was to set focus to a form element inside a Bootstrap collapse, when the collapse is shown, like this:</p>
  
  <pre><code>// set focus to the first element when the add-cell collapse is shown
  $('#collapsedAddTask').on('shown.bs.collapse', function () {
      $('#AddTaskTitle').focus()
  })
  </code></pre>
  
  <p>That works for my basic HTML (not single page app), but not with Aurelia. What's the Aurelia way?</p>
  
  <p><strong>Update</strong>
  Using the answer from <em>Miroslav Popovic</em> below, and in the comments, I got it to work like so (remember, this is a Bootstrap collapse component):</p>
  
  <pre><code>&lt;!-- the heading with an A that toggles visibility --&gt;
  &lt;div class="panel-heading"&gt;
      &lt;a href="#collapsedAddTask" data-toggle="collapse" id="addTaskHeader" click.delegate="addTaskShown()"&gt;Add task&lt;/a&gt;
  &lt;/div&gt;
  &lt;!-- the body, which is initially hidden --&gt;
  &lt;div class="panel-body"&gt;
      &lt;div class="collapse" id="collapsedAddCell"&gt;
         &lt;input type="text" focus.bind="addTaskFocused"&gt;
         &lt;!-- more controls ... --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>