I noticed that when using <input type="radio" phx-click="click" ...> the radio buttons are not checked on click, only on the second click on the same button. I tried to put the phx-click in different parent elements and the behavior is the same, ie, it seems that it captures the event and prevent it to propagate to the input and check it.
So, my questions are:
Is this the default and intended behaviour or any phx-click/change?
is there a simple way to allow the event to propagate to the input element at the same time it triggers the phx-click?
Are you saving the radio button’s state somewhere and use it to initialize the input? Because, otherwise, it will simply revert to the default state when re-rendering after the event.
I’m in the present approach, but that approach is putting data on the wire as I need to check the checked state of every radio button and thus “a lot” of data is passed compared to allowing the natural behavior of HTML when a radio button is clicked…it just gets checked.
But I understand what you said: there’s an event, LiveView will diff what changed, radio button state didn’t change, so it gets rendered with the same state (or better, LiveView won’t allow the default HTML behaviour as long as there is an event that triggers a diff check and server render).
So, is there a way/hook/etc to allow the radio button to behave from an unchecked state to a standard HTML checked state even when there’s a phx-* event?
I did some tests and when you use the radio buttons with a phx-click action, everything works as it should in normal html. The state doesn’t need to be saved as there’s no re-render of the markup (so, I was wrong in my previous reply).
When I added the radio buttons inside a form container that also had a phx-change event, I experienced the behaviour your described:
the radio buttons are not checked on click, only on the second click on the same button
There’s a race condition here since both events would be fired by LiveView and the form event (phx-change) would re-render the input (thus why you need to save the state).
By any chance, are your radio buttons encapsulated by a form?
Yes they are, (in fact there’s only a phx-change event in the form an none on the radio button as it is) but I tried also a scenario where they are not and I got the same result. Maybe it was my mistake.
EDITED:
After double checking again I got the same behavior on radio buttons that generate an event that is handled in a handle_event/3. If they don’t generate anything that is handled then the behaviour is the standard.
I noticed that when using input type radio phx-click click … the radio buttons are not checked on click, only on the second click clicker counter on … I was showing that any time the change event is fired, the click event is also fired. Just because I was using both events in my example does not mean I was … When I click this data-phx -link , it works - redirects correctly, but there is an error in the JS console: no component found matching …
