This is an archived snapshot of W3C's public bugzilla bug tracker, decommissioned in April 2019. Please see the home page for more details.

Bug 28033 - HTML5 Datalist Element and Input Element's List Attribute Dead on Arrival
Summary: HTML5 Datalist Element and Input Element's List Attribute Dead on Arrival
Status: RESOLVED NEEDSINFO
Alias: None
Product: WHATWG
Classification: Unclassified
Component: HTML (show other bugs)
Version: unspecified
Hardware: Other other
: P3 normal
Target Milestone: Unsorted
Assignee: Ian 'Hixie' Hickson
QA Contact: contributor
URL:
Whiteboard:
Keywords:
Depends on:
Blocks:
 
Reported: 2015-02-16 07:22 UTC by steve faulkner
Modified: 2015-09-02 09:24 UTC (History)
4 users (show)

See Also:


Attachments

Description steve faulkner 2015-02-16 07:22:10 UTC
from http//lists.w3.org/Archives/Public/public-html-comments/2012Sep/0006.html

The UX for the HTML5 datalist element/list attribute feature is
unusably bad in every browser. To the extent that users will continue
to favor a javascript solution over the HTML implementation rather
than subject their users to an experience that is often broken,
confusing and ugly.

When browser vendors implement a feature like this so poorly, the spec
must be looked at as a source of blame. After reading the spec, I
believe that to be the case here. It is ambiguous and leaves critical
decisions up to the user agent. Without consistency on a fundamental
level among user agents, the web as a platform cannot succeed. That is
the whole reason for this spec.

If one were reading the spec, the issues in it may not be apparent
because of the simple examples used. Let's consider a more realistic
example. I have an input that will submit a user id. To make this easy
for users, I supply a datalist element to suggest user ids to the
user. My user ids are UUIDs, so instead of displaying those, which
likely mean nothing to my user, I want to use a label to display the
names of the user. I have something like this:

<input type="text" list="users">
<datalist id="users">
<option value="1ffb3722-314e-42c0-b8c5-288aaf0b37b8">Nick</option>
<option value="9f3798b3-de1e-4adf-b71c-a4a4e01dde3b">Mike</option>
<option value="7a1b0a0a-06d0-4398-a610-9b3db4635944">Rachel</option>
</datalist>

This is a more realistic example than the ones presented in the spec
of treating a properly cased name as the label and value.

The first issue is that the spec does not specify how the datalist is
to be searched when filtering based on user input. Presently, Chrome
matches from the beginning of the value string only. Firefox matches
from anywhere inside of the label string, and ignores the value
string. I haven't tested Opera and Internet Explorer. I'm afraid to.

The second issue is that the spec is ambiguous on what the user agent
should display when presenting suggestions: Chrome shows the value and
label, side by side. Firefox shows only the label. Neither of these
implementations would be considered incorrect by the spec as I read
it, nor would be ignoring the label and showing only the value. Once
again, the spec is open-ended on this subject.

The third issue is that the spec is silent on how the suggestion
should be inserted into the input. The browsers are at least
consistent on this point, and in all fairness, I don't know that HTML
allows for a better solution. That doesn't mean that the implemented
solution is correct though. When selecting an option, the value is
inserted into the input. In Firefox, this means that the name that the
user selected is replaced with a long string of numbers and letters
that the user has never seen before, in the case of my example. In
Chrome the experience is slightly better, since I am at least shown
the values before selecting the option, which may make the appearance
of the value less surprising. But imagine I have 20 people to add to a
list of input elements that rely on the users datalist. I can't look
back at previous input elements to see who I have added in a practical
way. This is simply broken, and makes the list attribute/datalist
feature unusable.

I propose that the spec should take a stance on how options are
filtered. Matching at any position, case insensitively, in the label
seems to be the most useful experience, however, matching against both
the label and value wouldn't be awful either.

I further propose that the spec should express the proper
implementation for the second issue raised above. If the value must be
inserted into the input element, it should also be displayed as a
suggestion.

Finally, I propose that some consideration be given to a means by
which the input element can submit the value while displaying the
label of the chosen option. This is supported in the case of many
other input types, but I can understand why this makes less sense for
an input type of text. Surely there must be some sane way of doing
this though.
Comment 1 Ian 'Hixie' Hickson 2015-03-04 20:33:53 UTC
Not prescribing UI is intentional, and consistent with all the other parts of the spec. UI prescriptions belong in guideline specs, of which there are several, though I don't know if any cover this feature yet.

On the specific issue of filtering behaviour, it would make no sense to specify a particular behaviour since the state of the art for filtering is steadily improving. For example, you could use semantic analysis, e.g. in a drop-down for geographic areas, suggesting "Britain" and "UAE" when the user has typed "Unite".

The spec does give a UI example here:
   https://html.spec.whatwg.org/#url-state-(type=url)
...which shows the value and label both being displayed. It's up to the user agent what they display, but since the point of the feature is to select a value, not showing the value seems like a bad design. Chrome does the sensible thing, including both the value and the label. I'm surprised to see Firefox does not; I recommend filing a bug on Firefox.

The overall use case of a field that displays different text than the underlying logic representation is usually referred to as "chip" UI. I agree that that would be nice, but I think we should rely more on custom elements to address new use cases rather than adding things to HTML at this point.
Comment 2 Anne 2015-09-02 09:24:47 UTC
This is not sufficiently actionable.