Basic question here (I’m just starting with LiveView and relative Phoenix newbie, too).

I’d like to build a page that dynamically reloads context when the user chooses a new option from a select list.

Functionally, like having a menu of links on the left, picking one, and the page redraws. But, instead of a long list of items, just a select input.

My problem is getting the a handle_event() on change of the select. (Key point, I don’t want the user to pick an item and them hit a "submit” button… idea is they just pick a new item in the popup list, and the page dynamically changes).

Here’s one (of many) variations I’ve tried, the problem with this one is that it doesn’t send the team ID to handle_event() (I realize this is a bit of a mess right, but… just my latest experiment):

<.form id="navigation" action={~p"/log"} method="post">
  <select :if={@teams} class="select select-info" phx-change="navigate">
    <option disabled selected>Pick a team</option>
    <option :for={team <- @teams} value={team.id} phx-value-id={team.id}>
      {team.name}
    </option>
  </select>
</.form>

Obviously, it’s for picking different teams… them the page updates, with various team details.

The above doesn’t work because I don’t get the value I need, team.id, instead I get this in the handler:

[debug] HANDLE EVENT "navigate" in WasteWalkWeb.LogLive
  Parameters: %{"_target" => ["undefined"]}

What I’m shooting for is a simple handle_event("navigate", %{"id" => id}, socket) function.

Doing this with a simple list of value works, but trying to move it into a select has me stumped. Thanks.