determine what (if anything) we need to do to support <datalist> about binding HOT 6 CLOSED

Came up on an issue when trying to support this (specifically for autocomplete) in our app.

We have a form that contains multiple input fields, which are associated with their own datalist. When trying to bind the input list attribute to the datalist id, we receive the following error:

ERROR [app-router] TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'(…)

My question is, how do we support having multiple datalists in the same document if we cannot dynamically assign unique list values for each input element?

from binding.

Could use this for creating your my own autocomplete custom element.. :)

from binding.

@jdanyow Do we need to do anything for this?

from binding.

I think the original question was around using an input combined with a datalist to in a <select> element like fashion in that the input's value binding would handle objects like we do in the select. This would be a good candidate to explore in an external plugin and then perhaps merge into the core if a good solution is found.

from binding.

Apparently the input element's list property is read-only... strange it's not documented as such:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

You'll need to set the list HTML attribute (eg setAttribute('list', myId)) instead of attempting to assign the input element's list DOM property.

Here's an example that uses a binding behavior to make it easier:

https://gist.run/?id=40fbbb1ba7c43b1df5f078f0093c11e3

from binding.

Worked like a charm! Thanks Jeremy.

from binding.