LiveView Select phx-click not updating server in Safari

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!

I haven’t used LiveView a lot but you shouldn’t use click event with select HTML elements. Use change event instead.

It’s not a standard liveview pattern. Clicks are for buttons and not form inputs.
What you’re doing is imo the result of countless js frameworks ignoring the semantic of having forms in html.

The solution here is to wrap the select in a form and put phx-change on the form.

2 Likes

Ah I see, yes that makes sense. I’ll try that, thanks so much @wanton7 @LostKobrakai :+1:t4: