<datalist> displaying both label and values for option elements is a little confusing

[joshdales]

What is the issue with the HTML Standard?

When using a datalist it is not obvious reading the spec that both the label and value will be shown, and even then that value takes precedence when displayed. When I use an option in a select element I don't see the value I only see the label, but when used in a datalist the value is always present and takes a high emphasis over the label.

I know that the spec is clear that the datalist is distinct from a select element however it does not mention anything about this and as they both use option elements I would have expected the behaviour to be closer to each other.

I've used this before and it's always found this behaviour slightly confusing and it's caused a few problems. As I didn't want to show the value just the label (like a select) but wanted the input & datalist to function as a select-like element that you can type in. As such I just had to just display the label text and then match that to the matching value with JS once it had been selected, rather than just rely on the value.

[annevk]

While user agents can tweak what is presented, the script-observable behavior cannot be changed without some kind of additional opt-in feature.

But perhaps steering it all towards a list of values is best as an end user is able to change them afterwards after all.

[joshdales]

That makes sense - and I think was a misunderstanding on my part when I first used it. And I think that was probably because I expected it to be behave more like the option list in a select.

I wonder if it might be worth more explicitly calling that out?