I tried very hard to understand what is going on here but I’m at a loss. I hope someone here can help me out.
I’m observing a strange behavior when triggering change events on a form using a JS hook. In a nutshell, a hidden input and a visible input that should hold the same value end up becoming out of sync and sending different values to the server.
LiveView version: 0.18.3
Phoenix: 1.6.15
This is the repository to replicate the issue: GitHub - maxmarcon/input_update_behavior
Here’s the description of the issue:
There’s a hidden and a text input in a form, both holding the same value (initially 0)
The value can be incremented by either clicking on a div or on a button.
There is also a button that triggers a change event on the form. The button sends an event to a JS hook on the client, which in turn dispatches an “input” event on the hidden input field:
If you click a few times on the div, and then trigger the change event, you’ll see that the values of the 2 inputs (hidden and visible)
which are being sent to the server are identical, as expected.
However, if you then click again a few times on the div, and then trigger the change event again, you’ll see that the hidden input has not been updated and has kept the value it had at the time of the last change event:
Clicking on the submit button always sends the expected (identical values) to the server .
Why do the hidden input and the visible input become out of sync when triggering the change event via JS?
(Interestingly enough, all works as expected if the value is increased using a button and not a div)
Thank you so much in advance to anyone who might be able to give me a useful hint!
