<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
MarkBoots
MarkBoots2y ago
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
angelovdev
angelovdevOP2y ago
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.
MarkBoots
MarkBoots2y ago
true, but yea... build it out yourself. or use a ui lib
angelovdev
angelovdevOP2y ago
I like the minimalism of using what's already built-in, if only it was built to spec..
capt_uhu
capt_uhu2y ago
i've used https://projects.verou.me/awesomplete/ before to even out the inconsistencies for datalist
MarkBoots
MarkBoots2y ago
had something similar last week. wanted to show flag emojis in select options. No problem with FF, but Chrome shows the string
angelovdev
angelovdevOP2y ago
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
capt_uhu
capt_uhu2y ago
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
Want results from more Discord servers?
Add your server