Phoenix Live View: Client-Side Patching with Select Element (JS.dispatch & LiveSocket.execJS)

Hi everyone,

I’m working on a Phoenix Live View application where I wanted to achieve client-side navigation triggered by a user’s selection in a select element. The user selects an option, and the application navigates to the corresponding path without a full page reload.

Initially, I explored using phx-click on each option, but it did not generate any event. Moving to the select element itself, I had trouble accessing the selected value.

My current approach utilizes phx-change to trigger a custom event named "live_view_navigate". Within the event listener, I access the selected value from the event object’s target.value. And trigger a JS.patch via liveview.execJS.

Here’s the interesting part:

in app.js

window.addEventListener("live_view_navigate", event => {
  const path = event.target.value;
  const encodedJS = '[["patch",{"replace":false,"href":"' + path + '"}]]';
  liveSocket.execJS(event.target, encodedJS)
});

And in the html:

<select id="current-tab" name="current-tab" phx-change={JS.dispatch("live_view_navigate")} >
  <%= for option <- @options do %>
    <option value={option.path} selected={option[:current]}><%= option.label 
  </option>
  <% end %>
</select>

This code constructs a JavaScript array representing a patch operation. It then uses liveSocket.execJS to execute this patch directly on the select element, achieving navigation without a server roundtrip.

My question:

Is this the recommended approach for achieving client-side navigation based on a select element in Phoenix Live View? Is there a cleaner or more efficient way to accomplish this functionality?

Thanks in advance for your insights!