LiveView has a problem with input name id

[shahryarjb]

if I put this <input type="hidden" name="id" value="<%= item.id %>"> line in lee file LiveView in handle event repeat html tags but if I change name to sthid, it works as well, I think id name is one of the parameters we shouldn’t use them in our source.

<div class="col-md-3" data-toggle="collapse" data-target="#FoodS" aria-expanded="false" phx-click="show-category-foods" phx-value-category-id="<%= category.id %>">
...
....
.....
......
<div class="spacer20">  </div>
  <div class="col-md-11 mx-auto collapse" id="FoodS">
      <div class="row">
         <%= for item <- @foods do %>
            <div class="col-md-3">
               <form phx-submit="save-client-food">
               
                  <div class="foodbox text-center" data-mh="landing-cards">
                     <img class="u-mb-small img-fluid" src="<%= item.image %>">
                     <div class="spacer20"> </div>
                     <h5 class="u-h6 u-text-bold u-mb-small text-center"><%= item.title %></h5>
                  </div>
                  <div class="spacer20">  </div>
                  <div class="row text-center mx-auto">
                     <button type="submit" class="btn btn-outline-danger mr-3">انتخاب</button>
                     <input type="text" class="form-control col-md-6 mr-3" name="number" placeholder="انتخاب"/>
                  </div>
                  <input type="hidden" name="foodid" value="<%= item.id %>">
               </form>
               <div class="spacer20">  </div>
            </div>   
            
         <% end %>
      </div>
    
  </div>

handle_event

def handle_event("show-category-foods", %{"category-id" => category_id}, socket) do
      {:noreply, assign(socket, foods: CategoryQuery.show_category_foods(category_id))}
end

[slouchpie]

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

[slouchpie]

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".

[slouchpie]

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!

[karim-semmoud]

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

[wanton7]

I had the weirdest problem with LiveView's change tracking when name attribute has value id

I started getting duplicate form elements on DOM updates with leex markup like below and I fixed it by changing hidden input’s name attribute from id to player_id. What I mean is that I clicked New card button and new form element would added to DOM (a duplicate) for some player rows. I also added id attribute for form and didn’t help and there where multiple forms with same id. Does input with name attribute with value of id have some sort of special meaning in LiveView and is it documented som…

[slouchpie]

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