Template

by wholypantalones

HTML

<h2>No way to trigger datalist open</h2>
<input id="text" type="text" list="test-list" value="" placeholder="Choose a thing">
<ul id="test-list">
  <li value="1">1</li>
  <li value="2">2</li>
</ul>

JavaScript

// get the element in question
const input = document.getElementById('text');
const dl = document.getElementById('test-list').style.display = 'block'
// focus on the input element
input.focus();

// add event listeners to the input element
input.addEventListener('keypress', (event) => {
  console.log(`You have pressed key: ${event.key}`);
});

input.addEventListener('keydown', (event) => {
  console.log(`key: ${event.key} has been pressed down`);
});

input.addEventListener('keyup', (event) => {
  console.log(`key: ${event.key} has been released`);
});

// dispatch keyboard events automagically to trigger datalist
setTimeout(() => {
  input.dispatchEvent(new KeyboardEvent('keydown', {
    'key': 'ArrowDown'
  }));
}, 200);
// nope, doesn't do anything