<ul dir="auto">
<li>Electron version: 1.7.9</li>
<li>Operating system: Windows</li>
</ul>
<h3 dir="auto">Expected behavior</h3>
<p dir="auto">The datalist element should let the user to select a predefined value from a drop-down list for input elements.</p>
<h3 dir="auto">Actual behavior</h3>
<p dir="auto">After selecting a value from drop-down list, that value is displayed in the input field, but the "value" property of that input element is an empty string instead of the selected value.</p>
<h3 dir="auto">How to reproduce</h3>
<p dir="auto">Using the below code snippet. The input element's value will be displayed as the window title.</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;input id=&quot;test-field&quot; type=&quot;text&quot; list=&quot;test-list&quot; /&gt;

&lt;datalist id=&quot;test-list&quot;&gt;
  &lt;option value = &quot;Car&quot; /&gt;
  &lt;option value = &quot;Bike&quot; /&gt;
  &lt;option value = &quot;Truck&quot; /&gt;
&lt;/datalist&gt;

&lt;script&gt;
  document.getElementById(&quot;test-field&quot;).addEventListener(&quot;input&quot;, (e) =&gt; {
    document.title = &quot;Value is: &quot; + e.target.value;
  });
&lt;/script&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">id</span>="<span class="pl-s">test-field</span>" <span class="pl-c1">type</span>="<span class="pl-s">text</span>" <span class="pl-c1">list</span>="<span class="pl-s">test-list</span>" /&gt;

<span class="pl-kos">&lt;</span><span class="pl-ent">datalist</span> <span class="pl-c1">id</span>="<span class="pl-s">test-list</span>"<span class="pl-kos">&gt;</span>
  <span class="pl-kos">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span> = "<span class="pl-s">Car</span>" /&gt;
  <span class="pl-kos">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span> = "<span class="pl-s">Bike</span>" /&gt;
  <span class="pl-kos">&lt;</span><span class="pl-ent">option</span> <span class="pl-c1">value</span> = "<span class="pl-s">Truck</span>" /&gt;
<span class="pl-kos">&lt;/</span><span class="pl-ent">datalist</span><span class="pl-kos">&gt;</span>

<span class="pl-kos">&lt;</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span>
  <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-en">getElementById</span><span class="pl-kos">(</span><span class="pl-s">"test-field"</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">addEventListener</span><span class="pl-kos">(</span><span class="pl-s">"input"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
    <span class="pl-smi">document</span><span class="pl-kos">.</span><span class="pl-c1">title</span> <span class="pl-c1">=</span> <span class="pl-s">"Value is: "</span> <span class="pl-c1">+</span> <span class="pl-s1">e</span><span class="pl-kos">.</span><span class="pl-c1">target</span><span class="pl-kos">.</span><span class="pl-c1">value</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">&lt;/</span><span class="pl-ent">script</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">Electron version: 1.7.3 beta<br>
Operating system: Windows 7 x86_64 Professional</p>
<p dir="auto">Clicking the pyramid icon on an input control associated with a data list and picking a value from the list, then evaluating <code class="notranslate">value</code> property of the input control, the value is expected to match the text chosen from the data list, which the input control is now showing.</p>
<p dir="auto">Instead, the text returned by <code class="notranslate">value</code> property is an empty string, or at least the string that was manually typed into the input control prior.</p>
<p dir="auto">Only manual editing of value of the input control, as you would with an ordinary text input without a n associated datalist, causes the <code class="notranslate">value</code> property to yield the same text that the input control is showing.</p>
<p dir="auto">Using following markup to reproduce by loading up default Electron distribution and typing <code class="notranslate">document.location = ...; /* path to file containing below text */</code> in Developer Tools console:</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;body&gt;
		&lt;input list=&quot;foobar&quot;&gt;
		&lt;datalist id=&quot;foobar&quot;&gt;
			&lt;option value=&quot;apple&quot;&gt;
			&lt;option value=&quot;orange&quot;&gt;
			&lt;option value=&quot;banana&quot;&gt;
		&lt;/datalist&gt;
	&lt;/body&gt;
&lt;/html&gt;"><pre class="notranslate"><code class="notranslate">&lt;!DOCTYPE html&gt;
&lt;html&gt;
	&lt;body&gt;
		&lt;input list="foobar"&gt;
		&lt;datalist id="foobar"&gt;
			&lt;option value="apple"&gt;
			&lt;option value="orange"&gt;
			&lt;option value="banana"&gt;
		&lt;/datalist&gt;
	&lt;/body&gt;
&lt;/html&gt;
</code></pre></div>