The datalist quest
February 4, 2026 - Reading time: 8 minutes

Alright folks, this week I wanted to share my quest around the datalist element not properly working on Firefox for Android since... forever?

What I'm trying to achieve

Let users input food items with a set of suggested options (example from MDN):

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

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

What I observe

It works fine with Chrome or Firefox on Desktop but when we start typing on Firefox for Android no suggested option pops up. This is a known bug, opened back in... March 2019:  https://bugzilla.mozilla.org/show_bug.cgi?id=1535985 Frustrating!

Workarounds no longer workarounding

Spoiler! These unsuccessful tests are assembled in a CodePen. 

Invoke select element?

For some time, it looks like hidding a select element inside the datalist would force the browser to switch to select if datalist was not supported. Something like:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">

  <!-- select to the rescue -->
  <label for="ice-cream-choice-fallback">Choose a flavor:</label>
  <select name="ice-cream-choice-fallback" id="ice-cream-choice-fallback">

     <!-- Options list for both with textContent -->
    <option value="Chocolate">Chocolate</option>
    <option value="Coconut">Coconut</option>
    <option value="Mint">Mint</option>
    <option value="Strawberry">Strawberry</option>
    <option value="Vanilla">Vanilla</option>

  </select>
</datalist>

This is suggested by DevCurry in 2011 but it's no longer working.

Use the text magic?

In 2012, Alsacreations also suggests to let some text encourage the reluctant browser to display options:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
  <!-- Some text to the rescue -->
  Here's what you should see if your browser doesn't support datalist:
  <option value="Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

It's no longer working either.

Call JavaScript for help

In 2013, someone on stackoverflow pimps it up with some jQuery that I hopefully correctly translated into vanilla JavaScript for this example...

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">

  <!-- select to the rescue -->
  <label for="ice-cream-choice-fallback">Choose a flavor:</label>
  <select name="ice-cream-choice-fallback" id="ice-cream-choice-fallback">

     <!-- Options list for both with textContent -->
    <option value="Chocolate">Chocolate</option>
    <option value="Coconut">Coconut</option>
    <option value="Mint">Mint</option>
    <option value="Strawberry">Strawberry</option>
    <option value="Vanilla">Vanilla</option>

  </select>
</datalist>

<script>
  const select = document.getElementById("ice-cream-choice-fallback");
  const input = document.getElementById("ice-cream-choice");
  select.addEventListener("change", e => input.value = e.target.value);
</script>

But I'm afraid it's no better.

So what?

After a lot of Duckduckgoing I may have found three leads:

  • Force the hidden select to show up with a custom dropdown button, maybe with suggestions showing up as typing - see this CodePen for inspiration? Or maybe create a select instead of the input when the detected User Agent is Firefox for Android? Probably too much of additional JavaScript...
  • Use mfranzke's polyfill? Looks like a very good work but it's another dependancy and things to load for the user
  • Wait for the support of showPicker method? I read on stackoverflow that it would be available on March 2026, it's quite soon now...

Also I wonder whether specifying the input type as text may help or if it does not change a thing. Anyway, I guess it's better HTML so it should be there.

In conclusion I'll probably go for the showPicker method. If you have any other idea, I would be glad to hear it!

Search

Categories