aurelia
Cannot bind to list attribute of input element
Hi,
I'm submitting a bug report
- Library Version: 1.0.5
- Browser: Chrome 54 on Windows 7
Current behavior: If I place the following in a template file: (where listIdVar is a string variable with any value)
<input value.bind="input" list.bind="listIdVar"></input>
<datalist id.bind="listIdVar"> <!-- options... --> </datalist>
I get the following error:
TypeError: Cannot assign to read only property 'list' of object '#<HTMLInputElement>'
Same happens if I use list="prefix-${listIdVar}" instead.
Expected/desired behavior: I wanted regular one-way binding from my variable to the "list" attribute of the input element. However, it seems that aurelia tries to do this via assigning to the read-only 'list' property. Per http://stackoverflow.com/questions/24925336/set-html5-input-list-value-with-javascript, it seems the correct way to do this is via setAttribute.
Thanks.
Right- for some reason HTMLInputElement.list is read-only:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement
You'll need to set the input's list via the HTML attribute instead of it's DOM property:
<input value.bind="input" list.bind="listIdVar & attr">
Make sure you have aurelia-templating-resources 1.1.0 or higher.
Keeping this open so we can add logic to the binding engine to use the html attribute by default for this scenario instead of the standard behavior which assigns the dom property.
WoW.. Hidden gem of cheap autocomplete UI Support is poor though )-:
Definitely made my day
Might me closed though
I'd like to keep this open as a legit enhancement to the binding engine in the future.
