So I have this select in a livecomponent:
<select phx-click="update_role", phx-value-id="<%= participant.user_id %>" phx-value-key="role" phx-target=<%= @myself %>>
<%= options_for_select(["role1": "1", "role2": "2", ...], participant.role) %>
</select>
where update_role is:
# update participants
...
MyApp.Endpoint.broadcast_from(self(), "roletopic", "update_participants", updated_participants)
...
As far as I can tell, this is a pretty standard LiveView pattern. And what’s more, it totally works just fine with Firefox and Chrome exactly as expected. The user clicks the drop-down, selects the role, and it updates everywhere for all users instantly… except when using Safari.
What is super-confusing to me is that there are plenty of interactions (buttons, input fields, etc) that follow this same pattern, and they all work everywhere, including Safari. But just this one particular interaction isn’t working, and only with Safari.
For every other interaction, the server is updated, the other clients are updated, and this is reflected in the Javascript console. But the drop-down interaction above doesn’t get reflected in the Javascript console. It’s as if the “phx-click” event isn’t happening in Safari.
Any help would be much appreciated! Thanks!