title: Aurelia event firing order
body: <p>I am creating a custom template with a searchable select. There is <code>focus (trigger)</code>, <code>blur (trigger)</code>, <code>keyup (delegate)</code> and <code>value (bind)</code> bindings on the input element. The dropdown content is displayed in a div, inside the same div as this input. the dropdown is showing when focus is on the input box, but when I click one of the elements in my custom dropdown, the blur event fires before the click delegate would fire, and as such, i don't get a call to the <code>selectThis()</code> method.</p>
  
  <p>Template looks like this:</p>
  
  <pre><code>&lt;template&gt;
  &lt;require from="../searchabledropdown/searchabledropdown.css"&gt;&lt;/require&gt;
  &lt;div class="dropdown"&gt;
      &lt;input type="text" 
             placeholder="Search.." 
             id="inputSearchField" 
             value.bind="searchValue"
             keyup.delegate="findData()"
             focus.trigger="changeVisibility(true)"
             blur.trigger="changeVisibility(false)"&gt;
      &lt;div if.bind="visible" class="dropdown-content"&gt;
          &lt;a href="${'#' + option.thingId}" click.delegate="selectThis(option.thingId)" repeat.for="option of thingimabobs"&gt;${option.textValue}&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>How can i get the click element to fire first, without hacking it with timeouts and stuff...? - I have tried setting the blur.trigger on the <code>div</code> that contains the <code>class="dropdown"</code>, but it won't trigger at all then... </p>