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)
I rather have them fix radio, checkbox, and select first.
They can do both. What fixes for those three elements would you like?
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.
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.
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.