DEV Community

Tamb
Tamb

Posted on • Updated on

Dear WHATWG, fix datalist

Dear WHATWG,

For as long as moonlight has kissed the darkened night sky, front-end web developers have been creating hacky and cumbersome "typeaheads". Some people know these components as "autocompletes". Most of us know them as PITA (see Urban Dictionary).

There has been a semi-perfect solution in native HTML that has existed for millenia (Internet Explorer 10): the datalist element.

datalist is such a noble and proud element. It has stuck around through years of abandonment and abuse, watching div and JS take all the credit for functionality it has provided since its conception.

More recently, web components and their fill-in libraries have tried to make commonplace what datalist was meant for all along: being a native typeahead.

But datalist has weak spots that the partnership of div and JS have exploited again and again.

datalist weaknesses:

  • options cannot be styled
  • options cannot take additional HTML
  • options cannot be augmented with JavaScript
  • It provides no event API for filtering a list

Why the WHATWG has neglected datalist? I honestly don't know.
It gets a small blurb in their docs:
https://html.spec.whatwg.org/multipage/form-elements.html#the-datalist-element

And for the W3C it appears in one line under the list attribute on their site:
https://www.w3.org/wiki/HTML/Elements/input/text

So WHATWG, in the age of evergreen browsers, what the actual F are you doing??! Fix the above weaknesses. Give developers a native typeahead instead of forcing us to adopt newer tech like web components and shadow DOM.

Sincerely,

Many, many front-end developers

Top comments (5)

Collapse
 
elmuerte profile image
Michiel Hendriks

I rather have them fix radio, checkbox, and select first.

Collapse
 
tamb profile image
Tamb

They can do both. What fixes for those three elements would you like?

Collapse
 
elmuerte profile image
Michiel Hendriks

Being able to actually style them. Radio and checkbox styling is generally done via hacks using ::after. But select needs extensive hacking via JavaScript as styling is quite limited on the dropdown of options.

Thread Thread
 
tamb profile image
Tamb

I totally agree. But for the most part I have been able to get around those styles with just css and some extra HTML. Datalist is literally impossible to style. This is a big issue. So we end up replacing datalist wholesale with a custom component.

Thread Thread
 
brettcnelson profile image
π™±πš›πšŽπšπš

developer.mozilla.org/en-US/docs/W...

Didn't even know datalist existed until i read this post, so thanks. I'm sure you're aware but thought this link was interesting regarding styling.