Knowing when datalist is currently active/open

Question

Is it possible to know when the HTML <datalist> is currently active/open (via css pseudo-element or javascript event or otherwise)?

Answer 1

You can use the onfocus and onfocusout event handlers of the associated input tag. onfocusout will not fire of you select one of the datalist options because the input tag will still have focus. You can add the onchange event handler for this.

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" onfocus="console.log ('active');" onfocusout="console.log ('inactive');" oninput="console.log ('inactive')" />

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

This is not a perfect solution since it does not work when you select the same value twice.