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>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>