Radio group with latency changes value by itself


I have the following code to create a radio group in my LiveView:

<div id="my_radio_group_id" class="radio-group">
  <%= Phoenix.HTML.Form.radio_button(@form, :external_id_type, "id") %>
  <%= Phoenix.HTML.Form.radio_button(@form, :external_id_type, "uuid") %>

This works great locally where I don’t have any latency, but it will misbehave if I add some latency to the mix.

In the image below, I added a latency of 2000 ms by using liveSocket.enableLatencySim(2000):


Note: I get the exact same behavior if the server event also takes time (for example, adding Process.sleep(2000) to my validate event).

Basically, after clicking on the radio buttons, the events will reach the server with a delay of 2000, and for each one, it will update the radio group as shown in the image.

Is this the expected behavior? I understand why it is doing that (well, actually I don’t get why in the end neither radio button is selected tbh), but this is, IMO, a really bad user experience.

Right now I’m using phx-update="ignore" in the my_radio_group_id div as a workaround, but this seems kinda hacky to me and I’m not too familiar with phx-update="ignore" to know if there are any negative consequence of doing it.