LiveView has a problem with input name id

I do not think this is a LiveView bug.

<form id="my-form">
  <input name="id">
</form>

If the form is re-rendered in any way, it will be duplicated in the HTML, as you say.

But you can see in the devtools console that

document.querySelector("#my-form").id

does not return a string (like every other HTML element we are used to) but instead returns the child input with name “id”.

I

OK this might actually be a Live View bug. I don’t know.

I have created an example live view which shows weirdness with name="id" forms and conditionally rendered divs.

If you run this and click on “Click Me”, you will see form 1 get duplicated.

defmodule MyAppWeb.WeirdLive do
  use Phoenix.LiveView

  def render(assigns) do
    ~H"""
    <form id="form-1">
      <input name="id" placeholder="Form 1" />
    </form>
    <button phx-click="toggle">
      Click Me
    </button>
    <div :if={not @condition}>
      Conditional Div
    </div>
    <form id="form-2">
      <input name="id" placeholder="Form 2" />
    </form>
    """
  end

  def mount(_params, _session, socket), do: {:ok, assign(socket, :condition, false)}

  def handle_event("toggle", _params, socket), do: {:noreply, update(socket, :condition, &(!&1))}
end

The bug goes away if you change name="id" to, say, name="something-else".

This one is weird for the same underlying reason (input with name=“id”) but is immediately obvious on render:

defmodule ClormWeb.WeirdLive do
  use Phoenix.LiveView

  def render(assigns) do
    ~H"""
    <form :for={index <- 1..3} id={"form-#{index}"}>
      <input name="id" placeholder={"Form #{index}"} />
    </form>
    """
  end
end

This renders the first 2 forms with duplicates!

I think each input must have a unique id, the name can be whatever but the id has to be unique.

You can try this instead

   <form :for={index <- 1..3} id={"form-#{index}"}>
      <input name="id" id={"id-#{index}"} placeholder={"Form #{index}"} />
    </form>

I guess Phoenix, is generating duplicates ids for your name automatically, therefore the duplicate fields with sames ids when rendering, but this is just a guess

By using Phoenix HTML Form build-in .form this behavior is enforced and you receive error message for duplicate ids
Phoenix HTML Form will append the form id to each field, so that the ids are unique even even they are the same field names across multiple forms

You can have multiples forms without ids with different field names, but if you are going to have common field name across forms, then you must add and id to your form.
Phoenix HTML to_form provides an option to add the id

Here is a working example with multiple forms

   def mount(_params, _session, socket) do
    form_1 = to_form(%{"foo" => "foo", "bar" => "bar"})
    form_2 = to_form(%{"foo" => "foo", "bar" => "bar"}, id: "form_2")
    form_3 = to_form(%{"tar" => "tar", "zar" => "zar"})

    {:ok,
     socket
     |> assign(:form_1, form_1)
     |> assign(:form_2, form_2)
     |> assign(:form_3, form_3)}
  end

  def render(assigns) do
    ~H"""
    <div>

    Form 1

    <.form for={@form_1} as="form_1">
    <.input field={@form_1[:foo]} label="foo"/>
    <.input field={@form_1[:bar]} label="bar" />
    </.form>

    Form 2

    <.form for={@form_2}  as="form_2">
    <.input field={@form_2[:foo]} label="foo"/>
    <.input field={@form_2[:bar]} label="bar" />
    </.form>

    Form 3

    <.form for={@form_3}  as="form_3">
    <.input field={@form_3[:tar]} label="tar"/>
    <.input field={@form_3[:zar]} label="zar" />
    </.form>

    <pre>
    <%= inspect(@form_1, pretty: true) %>
    <%= inspect(@form_2, pretty: true) %>
    </pre>

    </div>

    """
  end

Doing the following will not work and will throw duplicate ids error in the console

    form_1 = to_form(%{"foo" => "foo", "bar" => "bar"})
    form_2 = to_form(%{"foo" => "foo", "bar" => "bar"}) // must add id because there is common field names
    form_3 = to_form(%{"tar" => "tar", "zar" => "zar"})

You can use inspect(@form) you see the difference between a form using the opts id option and one without the form id will be nil

%Phoenix.HTML.Form{
  source: %{"bar" => "bar", "foo" => "foo"},
  impl: Phoenix.HTML.FormData.Map,
  id: nil,
  name: nil,
  data: %{},
  action: nil,
  hidden: [],
  params: %{"bar" => "bar", "foo" => "foo"},
  errors: [],
  options: [],
  index: nil
}
%Phoenix.HTML.Form{
  source: %{"bar" => "bar", "foo" => "foo"},
  impl: Phoenix.HTML.FormData.Map,
  id: "form_2",
  name: nil,
  data: %{},
  action: nil,
  hidden: [],
  params: %{"bar" => "bar", "foo" => "foo"},
  errors: [],
  options: [id: "form_2"],
  index: nil
}

Hope this will help

Thanks for sharing this. I did try to find existing conversations about it.