Inconsistencies in form input element DOM updates

[johnsq]

Hello. I've been experimenting with Cyclejs this week and really do love it.

Is this a bug or just my naivety? It would appear that some form inputs do not respond correctly to dynamic value changes. Open this.. https://codepen.io/johnsq/pen/gzxgqO, check out the simple code and open your console.

Please follow these steps..

1. Drag the Range input control up and down. Everything looks good, the H2 and the Text input are updating their value as expected.

2. Now hit the Reset button. The H2 updates correctly, as does the Text input, but the Range input slider has not moved to zero. However, inspect it in the DOM inspector and you will see that it's value does show ="0" . How can an element's value be 0 in the inspector but not be the same on the page?

3. Next, type a numeric value into the text input. The H2 updates, the Range input again can be seen updating to the new value (but only in the inspector), but after doing this, the text input no longer responds to changes made when moving the Range input slider.. but the inspector does clearly show that the updated values are happening.

This behaviour is consistent in Chrome, Firefox and Safari.

Were you a aware of this? Is there a workaround?

Thanks for your time.

[mightyiam]

Use the value properties to set the current values of the input elements, instead of the value attribute.

[jvanbruegge]

Here a corrected codepen: https://codepen.io/anon/pen/dezRMe

[johnsq]

Thank you very much @mightyiam and @jvanbruegge.