Simulate click with javascript does not work on input with datalist

user_148496 0
Viewed 253

When clicking the input field brings a dropdown like list. When trying to do the same with javascript click() it does not work. Why not? Can it be fixed?

document.querySelector('.button-click').addEventListener('click', () => {
  console.log('Event');
  document.querySelector('#my_list').click();
});

document.querySelector('.button-focus').addEventListener('click', () => {
  console.log('Event');
  document.querySelector('#my_list').focus();
});
<button class="button-click">Button to simulate click</button><br>
<button class="button-focus">Button to simulate focus</button><br>

<input list="list" id="my_list">
<datalist id="list">
  <option value="option1"></option>
  <option value="option2"></option>
 </datalist>

html-datalist click javascript
1 Answers

click() is not the correct method here. Use focus() instead and it works just fine. focus() mimics the behaviour of actually clicking inside the <input/> while click() only clicks onto the element.

document.querySelector('button').addEventListener('click', () => {
  console.log('Event');
  document.querySelector('#my_list').focus(); // <-- change this method
});
<button>Button</button>

<input list="list" id="my_list">
<datalist id="list">
  <option value="option1"></option>
  <option value="option2"></option>
</datalist>

user_128349720
Related