title: Make select element truly unfocusable
body: <p>I have been trying to make a select element unfocusable. Multiple sources suggest to set the <code>tabIndex</code> to <code>-1</code>. That is what I have attempt, but it failed.</p>
  
  <p>Consider the following example:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addEv(id, event, message)
  {
    document.getElementById(id).addEventListener(event, function(){
      document.getElementById('console').innerHTML = message;
    });
  }
  addEv('select', 'focus', 'select focus');
  addEv('select', 'blur', 'select blur');
  
  addEv('span', 'focus', 'span focus');
  addEv('span', 'blur', 'span blur');
  
  addEv('select-wrapper', 'focus', 'div focus');
  addEv('select-wrapper', 'blur', 'div blur');</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#select-wrapper {
    display: inline-block;
    padding: 1px;
    border: 1px solid transparent;
  }
  #select-wrapper:focus {
    border: 1px solid;
    border-radius: 5px;
    outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="text" value="3 glasses"&gt;
  &lt;div id="select-wrapper" tabindex="0"&gt;
    &lt;span id="span"&gt;of&lt;/span&gt;
    &lt;select id="select" tabindex="-1"&gt;
      &lt;option value="beer"&gt;Beer&lt;/option&gt;
      &lt;option value="wine" selected&gt;Wine&lt;/option&gt;
      &lt;option value="vodka"&gt;Vodka&lt;/option&gt;
    &lt;/select&gt;
  &lt;/div&gt;
  &lt;input type="button" value="drink"&gt;
  &lt;div id="console"&gt;&lt;/div&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If you tab through the elements everything works as expected. The two input elements and the div element get focused. Same goes for clicking on the span that says "of". However if you click on the select element it gets focused instead of the div. This means that the wrong focus events become fired and the select element's visuals change just as it was focused. This is consistent among Firefox and Chrome so I assume that this is intentional.</p>
  
  <p>The question is: How can I make the select element unfocusable and make the div surrounding it focusable instead? And of course I still want to be able to open the dropdown and select an option.</p>