title: Prevent input datalist from automatically opening upon receiving initial keyboard focus
body: <p>I have an HTML5 drop-down control, configured similar to this:</p>
  
  <pre><code>&lt;input id="textCtrl" list="browsers"&gt;
  
  &lt;datalist id="browsers"&gt;
    &lt;option value="Internet Explorer"&gt;
    &lt;option value="Firefox"&gt;
    &lt;option value="Chrome"&gt;
    &lt;option value="Opera"&gt;
    &lt;option value="Safari"&gt;
  &lt;/datalist&gt;
  </code></pre>
  
  <p>I also give this control focus upon the page-load event:</p>
  
  <pre><code>//It's done via JQuery, but it makes no difference for this question
  $(function () {
      //Set focus to the text control
      $('#textCtrl').focus();
  };
  </code></pre>
  
  <p>So what happens, is that when the page loads in IE, or whatever it's called in Windows 10, the drop-down list is opened automatically upon page load, which looks kinda weird. So I would like to keep it initially closed:</p>
  
  <p><a href="https://i.stack.imgur.com/cNH9F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cNH9F.png" alt="enter image description here"></a></p>
  
  <p>Here, you can <a href="http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_datalist" rel="nofollow noreferrer">try it</a> for yourself.</p>
  
  <p>So, is there any way to avoid this list from opening upon page load while the text input has initial keyboard focus?</p>