Invalid value reported for inputs with name="value"

[jonatanklosko]

When an input has name="value", the value is reported as [object HTMLInputElement].

Phoenix v1.7.3, LV v0.19.1

Reproduction

Application.put_env(:sample, PhoenixDemo.Endpoint,
  http: [ip: {127, 0, 0, 1}, port: 8080],
  server: true,
  live_view: [signing_salt: "examplesalt"],
  secret_key_base: String.duplicate("a", 64)
)

Mix.install([
  {:plug_cowboy, "~> 2.6"},
  {:jason, "~> 1.4"},
  {:phoenix, "1.7.3"},
  {:phoenix_live_view, "0.19.1"}
])

Application.put_env(:nx, :default_backend, EXLA.Backend)

defmodule PhoenixDemo.Layouts do
  use Phoenix.Component

  def render("live.html", assigns) do
    ~H"""
    <script src="https://cdn.jsdelivr.net/npm/phoenix@1.7.3/priv/static/phoenix.min.js">
    </script>
    <script
      src="https://cdn.jsdelivr.net/npm/phoenix_live_view@0.19.1/priv/static/phoenix_live_view.min.js"
    >
    </script>
    <script>
      const liveSocket = new window.LiveView.LiveSocket("/live", window.Phoenix.Socket);
      liveSocket.connect();
    </script>
    <script src="https://cdn.tailwindcss.com">
    </script>
    <%= @inner_content %>
    """
  end
end

defmodule PhoenixDemo.ErrorView do
  def render(_, _), do: "error"
end

defmodule PhoenixDemo.SampleLive do
  use Phoenix.LiveView, layout: {PhoenixDemo.Layouts, :live}

  @impl true
  def mount(_params, _session, socket) do
    {:ok, assign(socket, text: "")}
  end

  @impl true
  def render(assigns) do
    ~H"""
    <form phx-change="change" phx-submit="submit">
      <input type="text" name="value" value={@text} phx-debounce="blur" />
      <div><%= @text %></div>
    </form>
    """
  end

  @impl true
  def handle_event("change", %{"value" => text}, socket) do
    {:noreply, assign(socket, text: text)}
  end
end

defmodule PhoenixDemo.Router do
  use Phoenix.Router

  import Phoenix.LiveView.Router

  pipeline :browser do
    plug(:accepts, ["html"])
  end

  scope "/", PhoenixDemo do
    pipe_through(:browser)

    live("/", SampleLive, :index)
  end
end

defmodule PhoenixDemo.Endpoint do
  use Phoenix.Endpoint, otp_app: :sample

  socket("/live", Phoenix.LiveView.Socket)
  plug(PhoenixDemo.Router)
end

# Application startup

{:ok, _} = Supervisor.start_link([PhoenixDemo.Endpoint], strategy: :one_for_one)

Process.sleep(:infinity)

[jonatanklosko]

Regression on v0.18.18 -> v0.19.0.

[rktjmp]

This is caused by serializeForm & extractMeta

Serialise form attaches values it receives as "meta" data:

phoenix_live_view/assets/js/phoenix_live_view/view.js

Line 85 in b2ff167

for(let metaKey in meta){ params.append(metaKey, meta[metaKey]) }

extractMeta grabs the element value key if present.

• form.key will look in the form for an element named key.
• When the root el passed to extractMeta is a <form>, el.value is not the value of an input, but the actual input element.
• so meta.value = form.inputs_by_name["value"] essentially.

phoenix_live_view/assets/js/phoenix_live_view/view.js

Line 854 in b2ff167

meta.value = el.value

[hubertlepicki]

I'm having the same issue across the app where I have name="value". Going to try the PR above now.

[hubertlepicki]

I have updated the app I work on with @rktjmp PR, and rebuilt the assets and can confirm that indeed it resolves the problem of [object HTMLInputElement] appearing inside text inputs throughout my app.

This is not a livebook app, it's just a form app that uses `input name="value"`` across multiple forms and we have seen them all broken with liveview 0.19 update and this indeed fixes it.

To whoever merges this: please do remember to run mix assets.build to regenerate the compiled JavaScript files.

[chrismccord]

Fixed in 0.19.2

[hubertlepicki]

@chrismccord I confirm v0.19.2 resolves the issue, thanks!