Can you display the datalist dropdown programatically?

Question

I started using the datalist, which has the functionality I need, but doesn't perform as I'd like it to. Specifically the problem is in Firefox where the activation of the dropdown is triggered by a double-click on the input element, instead of a single-click like it's done in Chrome or Edge. Is there some way to trigger the dropdown with a single-click in Firefox? If not, is there some element I can use from NPM or somewhere else, which allows for such customization?

So far I've checked many posts about the datalist, but they rarely contained this issue, and when they did, the solution wasn't really provided or it didn't work. The dropdown is triggered by mouse click or keypress, so the obvious solution was triggering an event. This hasn't worked, I was able to trigger the event, but it never triggered the dropdown. The programatic event never triggered the dropdown, while the user event did. I even tried storing the user event and using it, this didn't work either. Essentially the event triggering solution completely failed to provide any results, sadly I also don't have the code anymore. Any ideas?

<input id="test-input" list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

Kostival

what do you think about change event of input? – Adama

Can you elaborate? I tried using the change event, but the issue still remained, that the programmatically triggered events do not trigger the drop-down. – Kostival

I have the exact same problem but I haven't put in nearly as much work as you, @Ian. Have you made any progress? – Frizz

Answer 1

This solution works:

Basically, add a 'click' eventListener to the input, when event triggers, set display:block to the datalist element, then immediately after set display:none to datalist element. This way it shows the drop-down menu but doesn't add the datalist elements to page as a visible UI element.

listInput.addEventListener('click', (event) => {
    dataListElement.style.display = 'block';
    dataListElement.style.display = 'none';
});

Tested on Firefox 124.0.2

Remote