title: onclick action slower than css :focus selector switch
body: <p>I'm working with vue.js, vue-router and vue-material in my application. I have a search bar in which you can perform a global search for artists, releases and records. this looks somewhat like this:</p>
  
  <hr>
  
  <h2><a href="https://i.stack.imgur.com/MSEEI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MSEEI.png" alt="search bar with example search"></a></h2>
  
  <p>The result div is currently only displayed if the input form has focus.
  I do this like this in css:</p>
  
  <pre><code>.search-field + span {
    display: none;
  }
  
  .search-field:focus + span, .search-field:active + span {
    display: block;
  }
  </code></pre>
  
  <p>This shows/hides the result span in an absolute position before all other components.</p>
  
  <p><strong>The problem</strong> I have now is that when I click on one of the result entries it just does nothing.</p>
  
  <p>The result items displayed are of type <code>md-list-item</code> and define a <code>:to</code> property for the vue-router to perform the site navigation on-click.</p>
  
  <p>I assume it does nothing because the 'click' (action) is never actually performed on the list-item itself, but on the component behind it (body). I think this happens because the <code>:focus</code> selector changes the view state (hides the result span) before the onclick event is triggered on the item.</p>
  
  <p>Is there a way to delay the switch from <code>:focus</code> to normal? I tried to put the css property <code>transition-delay</code> on the <code>.search-field</code> class but that didn't bring me far.</p>
  
  <p><strong>Edit 1</strong></p>
  
  <p>Ifound <a href="https://stackoverflow.com/questions/25198996/html-css-dropdown-input-onclick-not-firing">a similar issue</a> but haven't been able to port the solution to my markup; it looks like this:</p>
  
  <pre><code>  &lt;md-field class="md-toolbar-section-end searchbar md-inline grow"&gt;
      &lt;label class="search-label"&gt;Search...&lt;/label&gt;
      &lt;md-input class="search-field" v-model="query"&gt;&lt;/md-input&gt;
      &lt;span class="result-span"&gt;
      &lt;md-content class="results md-elevation-15 md-scrollbar md-layout" :style="{ display: displayResults ? 'flex' : 'none' }"&gt;
        &lt;template v-for="loader in [loaderArtists, loaderReleases, loaderRecords]"&gt;
          &lt;div :key="Math.random()"&gt;
            &lt;md-list&gt;
              &lt;template v-if="loader.isLoading"&gt;
                &lt;span&gt;
                  &lt;md-progress-spinner :md-diameter="20" :md-stroke="3" md-mode="indeterminate"&gt;&lt;/md-progress-spinner&gt;
                &lt;/span&gt;
              &lt;/template&gt;
              &lt;template v-else&gt;
                &lt;template v-for="item in loader.dataSource.data"&gt;
                  &lt;md-list-item :to="item.value"&gt;
                    &lt;md-icon&gt;{{item.icon}}&lt;/md-icon&gt;
                    &lt;span class="md-list-item-text"&gt;{{item.label}}&lt;/span&gt;
                  &lt;/md-list-item&gt;
                &lt;/template&gt;
              &lt;/template&gt;
            &lt;/md-list&gt;
            &lt;md-divider class="divider"&gt;&lt;/md-divider&gt;
          &lt;/div&gt;
        &lt;/template&gt;
      &lt;/md-content&gt;
      &lt;/span&gt;
      &lt;md-icon class="search-icon"&gt;search&lt;/md-icon&gt;
    &lt;/md-field&gt;
  </code></pre>
  
  <p>I changed the css accordingly to use the property <code>visibility</code> instead of <code>display</code> and added <code>transition: visibility 0.2s</code> to the <code>.result-span</code> class - which did not work.</p>