I have to click 3 times on datalist to select item

user_11196682 0
Viewed 106

I don't know if this behavior is normal...

<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
  <option value="1" >Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<input id="test" value="test"/>

When you execute this code, the first input ( which using datalist ), you have to click 3 times quickly to select the word "datalist", but on the second input ( a normal input) you have to click on it 2 times.

When I say I click, I click at the end of the word, just after the last letter!

This is normal ? There is a way to bypass this?

Thanks a lot

html
1 Answers

Hey so there are a couple of issues in this approach

<input list="options" onchange="console.log(this.value)" value="datalist"/>
<datalist id="options">
  <option value="1" >Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</datalist>

<input id="test" value="test"/>

setting the value to datalist make the datalist always display datalist all the time and not showing any other options the best way to do the thing that you want which i persume is a drop down select is just to use select as follows:

<select class="form-control" name="options" onselect="console.log(this.value)">
  <option value="1" >Foo</option>
  <option value="2">Bar</option>
  <option value="3">Foo</option>
</select>

hope that is helpful.

user_92806590
Related