Form change event diffs are larger than expected

Phoenix Forum Questions / Help
1

Phoenix beginner here with a LiveView question. I’ve got a form, and it uses the new <.form> function component, and it’s using form helpers to generate the inputs (text_input , etc).

What I’m seeing is that the diffs being sent down on change are large, they include basically the entire contents of the input tags, even though the only thing that is changing is the value. If I skip the form helpers and write out an <input> tag manually, and specify the value attribute, then the only thing sent over the wire is the updated value.

Is that behavior to be expected in the former case? I thought these two cases should have the same representation over the wire.

And similarly, the form component function is injecting a hidden CSRF input, and the value of the CSRF token changes on every form change event. I would have thought that would have smartly been ignored from dom updates. I’m just trying to gauge if I’m doing something wrong, or if these are known and expected behaviors. It seems like if phoenix doesn’t do change tracking on form helpers, I should be writing them by hand in heex. Mainly because I’m using Tailwind and so the difference in size for sending the whole input down (massive class list and all) is significantly different than just sending down the updated value.

2 Likes
2

Could you show the code please?

3

I’ve since noticed that I’m also seeing this behavior from the code generated by the generators.

<div>
  <h2><%= @title %></h2>

  <.form
    let={f}
    for={@changeset}
    id="fundraiser-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save">
  
    <%= label f, :name %>
    <%= text_input f, :name %>
    <%= error_tag f, :name %>
  
    <%= label f, :description %>
    <%= textarea f, :description %>
    <%= error_tag f, :description %>
  
    <%= label f, :strike_handle %>
    <%= text_input f, :strike_handle %>
    <%= error_tag f, :strike_handle %>
  
    <%= label f, :bitcoin_address %>
    <%= text_input f, :bitcoin_address %>
    <%= error_tag f, :bitcoin_address %>
  
    <%= label f, :lightning_node_key %>
    <%= text_input f, :lightning_node_key %>
    <%= error_tag f, :lightning_node_key %>
  
    <div>
      <%= submit "Save", phx_disable_with: "Saving..." %>
    </div>
  </.form>
</div>

  def handle_event("validate", %{"fundraiser" => fundraiser_params}, socket) do
    changeset =
      socket.assigns.fundraiser
      |> Fundraisers.change_fundraiser(fundraiser_params)
      |> Map.put(:action, :validate)

    {:noreply, assign(socket, :changeset, changeset)}
  end

And I’ve upload a video of Safari while I’m making form changes while watching the websocket inspector: CleanShot 2022-02-18 at 16.06.05 · CleanShot Cloud

4

All the helpers here (label, text_input, error_tag) are not yet converted to heex and therefore do not support granular change tracking.

2 Likes
5

Thank you! I couldn’t find this information mentioned anywhere. Do you happen to know if there’s a PR or issue tracking this that I could watch?

6

Looks like this may be the closest tracking issue: Phoenix.HTML goes slim · Issue #372 · phoenixframework/phoenix_html · GitHub

1 Like
7

Save yourself these little headaches and install heex_formatter, it’ll fix up all those brackets for you.