Why do I get a target of "undefined" from this `phx-change` event?

Question

I've got a <select> in a LiveComponent and I want to react to the value being changed. There's no submit button. I have this:

<form>
  <select phx-change="per_page_changed" phx-target={@myself} >
    <option value={3}>3</option>
    <option value={5}>5</option>
  </select>
</form>

When I change the value, my component's handle_event is called, but the params are %{"_target" => ["undefined"]} - no value from the select. What I am I doing wrong?

Answer 1

Add a name attribute

The <select> needs a name attribute, like this:

<form>
  <select name="per_page" phx-change="per_page_changed" phx-target={@myself} >
    <option value={3}>3</option>
    <option value={5}>5</option>
  </select>
</form>

Without a name attribute, LiveView doesn't know what key to use for the input value. With name="per_page", the params to handle_event/3 are %{"_target" => ["per_page"], "per_page" => "5"}.