title: How to make a datalist-enabled HTML INPUT with a default value still show alternatives when clicked?
body: <p>After learning about the wonderful <code>datalist</code> feature in HTML 5 today, I have converted all my old messy combined <code>input</code> and <code>select</code> nightmares into <code>datalist</code>-enabled inputs. Works well except for one &quot;small&quot; detail:</p>
  <p>Whenever my <code>datalist</code>-enhanced <code>input</code> has a default value, for example <code>... value=&quot;USD&quot;</code>, it seems like it completely hides the list of options! This leaves the user in the dark about alternatives, just because I wanted the most common default to be displayed in the <code>input</code>, to save the user's time.</p>
  <p>At first, I thought I had a bug in my own code, but as soon as I removed the <code>value</code> attribute for the <code>input</code>, it does indeed list all the currencies (that's what my field is for) that I have defined in the <code>datalist</code>.</p>
  <p>Why can't I have a default value while still allowing the user to select from the list? I truly hope I'm just missing something obvious.</p>
  <p>I've tried reading here: <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist</a></p>