title: HTML <select> focus issue: 2 clicks needed with Firefox to select an <option>
body: <p>I'm working on a custom SELECT component with roughly the following structure (psuedoish example).</p>
  
  <pre><code>&lt;span&gt;
    &lt;select onclick=chooseAnOptionAndCloseSelect&gt;
      &lt;option&gt;
        .
        .
      &lt;option&gt;
    &lt;/select&gt;
    &lt;input onclick=displaySelectAndOptions onchange=filterOptionsAccordingTheInput /&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>So clicking the INPUT opens the custom SELECT component that has OPTIONs inside.<br>
  I'm filtering the displayed options with jQuery according to the input field's value.</p>
  
  <p>The focus is naturally on the input while typing values. After filtering some options I want to click on one of them. <strong>Problem is, that two clicks are required with Firefox, first apparently focuses the select element again</strong> (focus was on input) <strong>and only second click gives the desired outcome</strong> triggering of the the onclick event on the select (which passes on the option index).</p>
  
  <p>On IE this works fine, single click is enough for selection after filtering values.</p>
  
  <p>I cannot use focus re-direction because I do not want to disturb the user. That is to say the focus needs to stay on the input as long as the user likes so he/she can filter the values to their heart's content.</p>
  
  <p>Could some clever use of JS/jQuery listeners or having single click behave as double click do the trick? Any ideas appreciated.</p>
  
  <p><strong>UPDATE:</strong><br>
  I'm having some progress with the following approach (mouseup nested within onfocus):  </p>
  
  <pre><code>$(function() { // &lt;- document.ready
      $('select[data-filtered=true]').on('focus', function(evt) { // &lt;- onfocus
          $(this).mouseup(function(evt) { // &lt;- Find out that it  was a mouse click
              // This is the problematic part.
              // I need to find out somehow which &lt;option&gt; to mark as selected
              $(this).children().get(X).selected = true; // &lt;- children are the &lt;options&gt;
              $(this).click(); // &lt;- trigger a normal onclick handler 
          });
      });
  });
  </code></pre>
  
  <p>So the <code>&lt;option&gt;</code> that the mouse is over during the onfocus event should be marked as selected = true. Any suggestions? Extracting the mouse cordinates followed by more nested events perhaps?</p>