<datalist> inconsistencies across browsers
Is there any reason why Firefox displays only text between the closing and opening
option tag, while Chromium displays both it and the value parameter and WebKit displays only the value parameter?
Here is a demo:
https://codepen.io/angelovdev/pen/zYLdYNz
Maybe there is something I am missing?8 Replies
No, you're not missing anything. The html specs say that user agents should offer the label and value, but unfortunatly not all browser do. Form elements and inputs can vary a lot between browsers, it's a real pain in the **s
This element is a great candidate for not implementing autocomplete/suggest from scratch but it's so sad it's broken. I've added a link to the spec and the Firefox bug in the codepen.
true, but yea... build it out yourself.
or use a ui lib
I like the minimalism of using what's already built-in, if only it was built to spec..
i've used https://projects.verou.me/awesomplete/ before to even out the inconsistencies for datalist
had something similar last week. wanted to show flag emojis in select options. No problem with FF, but Chrome shows the string
flag emojis are shown as 2-letter codes on windows anyways
https://answers.microsoft.com/en-us/windows/forum/all/flag-emoji/85b163bc-786a-4918-9042-763ccf4b6c05
I am sure there are others too but adding dependencies is what I wanted to avoid
theoretically I understand where your coming from, but until open UI https://open-ui.org/ gets around to fixing these things your best bet is likely going to be some sort of dependency.
Home
Open UI