Form bindings & JS commands

[IdoLeshkowitz]

Environment

• Elixir version (elixir -v): 1.17.2
• Phoenix version (mix deps): 1.7.18
• Phoenix LiveView version (mix deps): 1.0.1
• Operating system: Mac OS
• Browsers you attempted to reproduce this bug on (the more the merrier): chrome
• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no: no

Actual behavior

Found an inconsistent behavior while using forms bindings & JS commands, binding a JS command to phx-change doesnt work well on recovery cause the JS command doesnt get evaluated properly and pushes a non-parsed event, I added a minimal example, try disconnecting and reconnecting to see the error. does using JS commands with form bindings is something that I should not be doing? or is it an issue?

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

defmodule DemoLive do
  use Phoenix.LiveView
  alias Phoenix.LiveView.JS

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

  def handle_event("validate", _, socket) do
    {:noreply, socket}
  end

  def render(assigns) do
    ~H"""
    <form phx-change="validate" id="form1">
      <input name="name" id="name1"/>
    </form>
    <form phx-change={JS.push("validate")} id="form2">
      <input name="name" id="name2"/>
    </form>
    """
  end

end
PhoenixPlayground.start(live: DemoLive)

Expected behavior

JS.push will always result with the same event reaching the server, no matter if the form is recovering or just changed.

[IdoLeshkowitz]

💥