JS error when submitting a form that has form associated inputs combined with phx-debounce.

[krishandley]

Environment

• Elixir version:

Erlang/OTP 27 [erts-15.2.7] [source] [64-bit] [smp:8:8] [ds:8:8:10] [async-threads:1] [jit] [dtrace]

Elixir 1.18.3 (compiled with Erlang/OTP 27)

• Operating system:

- MacOS

Bug

When inputs are associated with a form instead of nested and there is also phx-debounce on an input, this triggers a bug when submitting the form.

To re-create the error.

First type something into the input.

Then press submit.

TypeError: null is not an object (evaluating 'el[PHX_PRIVATE]')

If you remove phx-debounce then there is no error.

Code

Mix.install([
  {:phoenix_playground, "~> 0.1.8"}
])

defmodule DemoLive do
  use Phoenix.LiveView

  def mount(_params, _session, socket) do
    {:ok, assign(socket, foo: nil)}
  end

  def render(assigns) do
    ~H"""
    <div>
      <form id="form_test" phx-submit="SUBMIT" phx-change="CHANGE" />
      <input form="form_test" name="foo" value={@foo} phx-debounce="100" />
      <button form="form_test" type="submit">Submit</button>
    </div>
    """
  end

  def handle_event("CHANGE", %{"foo" => foo}, socket) do
    {:noreply, assign(socket, foo: foo)}
  end

  def handle_event("SUBMIT", %{"foo" => foo}, socket) do
    {:noreply, assign(socket, foo: foo)}
  end
end

PhoenixPlayground.start(live: DemoLive)