If I type "New", in the dropdown I only see "NY", whereas it should be "New York", as the documentation states.

I am not sure what the problem is, as this worked before.

I've tried it in Chrome and Edge, and they both don't work.

Has something changed in the actual component?

Here's the fiddle.

<input list="countries">
<datalist id="countries">
   <option value="DE">Germany</option>
   <option value="FR">France</option>
   <option value="US">United States</option>

1 Answers

Supersharp On

Choose to set either value or textContent, but not both.

b.onclick = ev => console.log( i.value )
<input id=i list="countries">
<datalist id="countries">
   <option value="France"></option>
   <option value="US">United States</option>
<button id=b>Get value</button>

Note that with Firefox it will work differently: with the textContent displayed dropdown list, and the selected value in the <input> text field :-(