1336875 - input.list datalist cannot be set with javascript

Status: RESOLVED INVALID

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

Description

[irt]

Attachment: developer console log

I have a dynamic growing form and need to bind the new elements to an existing `<datalist>`. Assigning input.list directly does not work, but setAttribute does.

* input.list = "datalist-id" returns id but subsequent readings of input.list return null
* input.setAttribute("list","datalist-id") works, but input.list is still null

I see in https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement that list attribute is readonly and its value confuses me, first states it is an object and then it is the object id, a string.

Comment 1

[irt]

forgot to say this is Firefox 51.0.1 (64-bit) on Arch Linux

Comment 2

[Tooru Fujisawa [:arai]]

list attribute is a string, that points the element in the same tree.

https://html.spec.whatwg.org/multipage/forms.html#attr-input-list
> If present, its value must be the ID of a datalist element in the same tree.


list property returns the pointed element, or null if it's not set or the element is not found,
and the property is readonly.

https://html.spec.whatwg.org/multipage/forms.html#dom-input-list
> The list IDL attribute must return the current suggestions source element, if any, or null otherwise.



(In reply to irt from comment #0)
> * input.list = "datalist-id" returns id but subsequent readings of
> input.list return null

the value of assignment becomes the right-hand-side value,
regardless of the left-hand-side is writable or not.
in this case, `list` property is readonly and the value doesn't change,
and the value of the assignment expression becomes "datalist-id".


> * input.setAttribute("list","datalist-id") works, but input.list is still
> null

are those elements added to the tree?
in the attached log, you don't append it to anywhere.

If you append them, like:
  document.body.appendChild(list)
  document.body.appendChild(input)
it would work.


> I see in https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
> that list attribute is readonly and its value confuses me, first states it
> is an object and then it is the object id, a string.

the document should be fixed to avoid mixing the explanation of attribute and property.
might be better filing separated bug for the documentation (or move this bug there, since I don't see any issue in DOM part)

Comment 3

[Tooru Fujisawa [:arai]]

for now, removed the list attribute part from the documentation and linked to list attribute in input document.

> HTMLElement object: Returns the element pointed by the list attribute.
>   The property may be null if no HTML element found in the same tree.

if the description is not yet appropriate, feel free to fix, or file a bug.

Comment 4

[irt]

Attachment: console log and test html

Attached example with test cases

1. try to set via input.list attribute
2. successful set via setAttribute
3. runtime created input, list set via setAttribute and appended to DOM
4. setting non existent datalist id


Now I see it is actually different to assign a property using equal sign and using the setAttribute method.

input.list is Datalist object or null
input.getAtribute("list") is string or null


Ok, I think this is only a misunderstanding, input.list is ReadOnly and can only be modified using setAttribute to an existing Datalist ID that is in the tree.

Comment 5

[Tooru Fujisawa [:arai]]

closing bug per comment #4 :)