611424 - datalist with placeholder strange behavior

Status: RESOLVED INVALID

(Core :: DOM: Core & HTML, defect)

Description

[gm]

User-Agent:       Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b7) Gecko/20100101 Firefox/4.0b7
Build Identifier: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b7) Gecko/20100101 Firefox/4.0b7

hello,

i'm currently playing with the html5 <datalist>

the code i use on beta7 : 

<label for="bookSagaTitleInput">Saga</label>

<input type="text" id="bookSagaTitleInput" name="sagaTitleInput" list="sagaList" placeholder="Saga du livre" />

<datalist id="sagaList">
    <select id="bookSagaTitleSelect" name="sagaTitleSelect">
        <option>Sagas déjà présente</option>
        <option value="Honor Harrington">Honor Harrington</option>
        <option value="Kris Longknife">Kris Longknife</option>
        <option value="Pern">Pern</option>
        <option value="Téméraire">Téméraire</option>
        <option value="The Lost Fleet">The Lost Fleet</option>
    </select>
</datalist>



<datalist> miss some tunning but it's working good, congratulations

GM

Reproducible: Always

Steps to Reproduce:
on first display the placeholder is visible => ok

on focus gain (by tab key) the placeholder disappear but the list is not displayed => not ok, the full list should be displayed

on focus loose the placeholder is displayed if the field is empty => ok

on click (mouse) the placeholder disappear but the list is not displayed => not ok, you have to click a second time to get the list, the list should be displayed on first click if field is empty

the list is limited in width to the field width => ko (should work as <select>)

the placeholder value is listed as part of the list with separator line => useless and confusing ?

clicking on the placeholder value in the list fill the field with the placeholder value as a real value => ko, it's a placeholder, not a value !

Comment 1

[Mounir Lamouri (:mounir)]

> Steps to Reproduce:
> on first display the placeholder is visible => ok
> 
> on focus gain (by tab key) the placeholder disappear but the list is not
> displayed => not ok, the full list should be displayed

Why the list should be displayed as soon as the field got the focus? It's behaving exactly like the autocomplete list: if you click twice, you will see the list and while typing you will see some suggestions.
I don't think we should show the list as soon as the field got the focus.

> on click (mouse) the placeholder disappear but the list is not displayed => not
> ok, you have to click a second time to get the list, the list should be
> displayed on first click if field is empty

ditto.

> the list is limited in width to the field width => ko (should work as <select>)

I do not agree. Why do you want that?

> the placeholder value is listed as part of the list with separator line =>
> useless and confusing ?
> 
> clicking on the placeholder value in the list fill the field with the
> placeholder value as a real value => ko, it's a placeholder, not a value !

Here, you are referring to a very recent change in the specifications. I don't think you should use a "placeholder value" in <select> elements for <select> inside <datalist>. Options inside the <select> are recognized by the <datalist> but the <select> isn't. That means the datalist element doesn't know about the "placeholder value".
But you have three ways to do what you want:
1. The first value inside your <select> isn't a placeholder value actually because it's value isn't the empty string. Do: <option value="">Sagas deja presentes</option> and, at least, it will set the empty string.
2. Use the disabled and selected attribues so the value will not appear in the suggestions:
<select>
<option selected disabled value="">Sagas deja presentes</option>
<option> ... </option>
</select>
3. Use a optgroup so the value will be ignored:
<select>
<optgroup label="Sagas deja presentes">
  <option> ... </option>
</optgroup>
</select>

IMO, the best solution is the last one but at least the second and third should do what you are expecting.

Comment 2

[gm]

>Why the list should be displayed as soon as the field got the focus? It's
>behaving exactly like the autocomplete list: if you click twice, you will see
>the list and while typing you will see some suggestions.
>I don't think we should show the list as soon as the field got the focus.

autocomplete inputs as well as datalist one have no graphic indicator of "list" availability
Showing the list on first click (when field is empty) will show the user of the possible values
<select> has a graphical indicator (down arrow)
inputs with datalist should have too imo


>> the list is limited in width to the field width => ko (should work as <select>)

>I do not agree. Why do you want that?

datalist values can be longer than input width and thus not completely visible

input can "scroll" its value if it's too long


>> the placeholder value is listed as part of the list with separator line =>
>> useless and confusing ?
>> 
>> clicking on the placeholder value in the list fill the field with the
>> placeholder value as a real value => ko, it's a placeholder, not a value !

>Here, you are referring to a very recent change in the specifications. I don't
>think you should use a "placeholder value" in <select> elements for <select>
>inside <datalist>. Options inside the <select> are recognized by the <datalist>
>but the <select> isn't. That means the datalist element doesn't know about the
>"placeholder value".

the code i posted was confusing, i was speaking of the placeholder on the <input>

>But you have three ways to do what you want:
>1. The first value inside your <select> isn't a placeholder value actually
>because it's value isn't the empty string. Do: <option value="">Sagas deja
>presentes</option> and, at least, it will set the empty string.

ok with that

>2. Use the disabled and selected attribues so the value will not appear in the
>suggestions:
><select>
><option selected disabled value="">Sagas deja presentes</option>
><option> ... </option>
></select>

i will have to test this solution
it's for browsers with no datalist support, right ?

>3. Use a optgroup so the value will be ignored:
><select>
><optgroup label="Sagas deja presentes">
>  <option> ... </option>
></optgroup>
></select>

same as 2

>IMO, the best solution is the last one but at least the second and third should
>do what you are expecting.

Can you test the behavior of an input with placeholder and list attribute ?
That's the main problem i think.
For me the placeholder of the input was listed has a value of the datalist (visually). 
It was also selectable and filling the input with the placeholder text as a "real" value.


Thanks for the quick response.

Comment 3

[Mounir Lamouri (:mounir)]

(In reply to comment #2)
> >Why the list should be displayed as soon as the field got the focus? It's
> >behaving exactly like the autocomplete list: if you click twice, you will see
> >the list and while typing you will see some suggestions.
> >I don't think we should show the list as soon as the field got the focus.
> 
> autocomplete inputs as well as datalist one have no graphic indicator of "list"
> availability
> Showing the list on first click (when field is empty) will show the user of the
> possible values
> <select> has a graphical indicator (down arrow)
> inputs with datalist should have too imo

Suggestions in datalist are only suggestions. Seeing them is not mandatory. I'm not sure we should annoy the users by always showing this list. In addition, as soon as the users will start typing, the list will appear with appropriate suggestions.

> >> the list is limited in width to the field width => ko (should work as <select>)
> 
> >I do not agree. Why do you want that?
> 
> datalist values can be longer than input width and thus not completely visible
> 
> input can "scroll" its value if it's too long

The <input> size has to be set by the content and the <datalist> is also set by the content. The UA is not going to dynamically change the size of the input to fit the suggestions in the datalist. The page has to be sure they will fit. You can change the input size with the size attribute and you can use labels on options to show a smaller text than the actual value.
Dynamically changing the input size would be the worst solution here.

> >> the placeholder value is listed as part of the list with separator line =>
> >> useless and confusing ?
> >> 
> >> clicking on the placeholder value in the list fill the field with the
> >> placeholder value as a real value => ko, it's a placeholder, not a value !
> 
> >Here, you are referring to a very recent change in the specifications. I don't
> >think you should use a "placeholder value" in <select> elements for <select>
> >inside <datalist>. Options inside the <select> are recognized by the <datalist>
> >but the <select> isn't. That means the datalist element doesn't know about the
> >"placeholder value".
> 
> the code i posted was confusing, i was speaking of the placeholder on the
> <input>

I can't reproduce that then. Can you check if that happen with a nightly? If it does, could you attach a screenshot?

By the way, you mentioned that showing the suggestions from the datalist and the suggestions from the form history wasn't a good idea. Why?

Comment 4

[gm]

>The <input> size has to be set by the content and the <datalist> is also set by
>the content. The UA is not going to dynamically change the size of the input to
>fit the suggestions in the datalist. The page has to be sure they will fit. You
>can change the input size with the size attribute and you can use labels on
>options to show a smaller text than the actual value.
>Dynamically changing the input size would be the worst solution here.

It's the other way around.
Actually for a <select> with a fixed width, the dropdown size is set by its content.

Datalist "dropdown" should be displayed the same way, aka with a greater width if needed.

>By the way, you mentioned that showing the suggestions from the datalist and
>the suggestions from the form history wasn't a good idea. Why?

Ah, so it was not the placeholder value but the form field history.
Nothing wrong with that so, sorry.

Comment 5

[Mounir Lamouri (:mounir)]

So, there are no issues with placeholder and datalist now?

For the two side issues you mentioned, I don't think they are relevant. The first one (one click to show the suggestions) is really a point of view so you might want to open another bug if you disagree. For the second one (<input> resizing to match the suggestion text size), I more strongly think it is wrong (but that doesn't forbid you to open a bug).

Anyway, I'm marking this bug INVALID given that it sounds to be because your placeholder text was in your form history list.
Please, feel free to reopen if it sounds incorrect.

Comment 6

[gm]

Ok

>For the second one (<input> resizing to match the suggestion text size), I more >strongly think it is wrong (but that doesn't forbid you to open a bug).

It's the other way around, the suggestions "dropdown" width should addapt to its content size. Same as <select> when an option is larger than the <select> width.