phx-click function is being called when component renders

[Narven]

Environment

• Elixir version (elixir -v):
  Erlang/OTP 24 [erts-12.2.1] [source] [64-bit] [smp:16:16] [ds:16:16:10] [async-threads:1] [jit] [dtrace]
  Elixir 1.13.2 (compiled with Erlang/OTP 24)

• Phoenix version (mix deps):
  {:phoenix, "~> 1.6.2"}

• Phoenix LiveView version (mix deps):
  {:phoenix_live_view, "~> 0.17.6"}

• Operating system:
  macOS Monterey 12.1

• Browsers you attempted to reproduce this bug on (the more the merrier):
  Firefox 96.0.3 (64-bit)
  Chrome 97.0.4692.71 (Official Build) (x86_64)

• Does the problem persist after removing "assets/node_modules" and trying again? Yes/no:
  Yes

Actual behavior

Creating a button on a component like this:

<button type="button" phx-click={publish()} class="action-button mt-2 sm:mt-0">
  <%= gettext("Publish") %> 1
</button>

with the function:

  def publish(js \\ %JS{}) do
    IO.inspect(js, label: "JS")
    js
    |> JS.set_attribute({"value", "publish"}, to: "#new_planner_action")
    |> JS.dispatch("click", to: "#publish_button")
  end

When liveview reloads is showing on the terminal:
JS: %Phoenix.LiveView.JS{ops: []}

Which should not happen. Is triggering the phx-click on render. And nothing is happening on click.

I've created a simple repo phoenix application with a component that has the same issue

https://github.com/Narven/weird_phx_click

Expected behavior

I'm expecting that nothing would show in the terminal when the component renders. And that inspect log to only show when I would click the button.

[Narven]

On the repo, just by going to /home you can see on the terminal the JS log

[Narven]

I was following what is in the documentation on:

https://hexdocs.pm/phoenix_live_view/bindings.html#js-commands

alias Phoenix.LiveView.JS

def hide_modal(js \\ %JS{}, selector) do
  js
  |> JS.push("modal-closed")
  |> JS.remove_class("show", to: selector, transition: "fade-out")
end

<button phx-click={hide_modal("#modal")}>hide modal</button>

[Narven]

I just notice, that is actually triggering twice?

[info] GET /home
[debug] Processing with Phoenix.LiveView.Plug.Elixir.WeirdPhxClickWeb.HomeLive/2
  Parameters: %{}
  Pipelines: [:browser]
JS: %Phoenix.LiveView.JS{ops: []}
[info] Sent 200 in 2ms
[info] CONNECTED TO Phoenix.LiveView.Socket in 29µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "A0waOg00K2liVD8sT0oIKUAvFyJufx0I49mtaRfX6ePA6zr_0d_NW1lJ", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
[info] CONNECTED TO Phoenix.LiveView.Socket in 25µs
  Transport: :websocket
  Serializer: Phoenix.Socket.V2.JSONSerializer
  Parameters: %{"_csrf_token" => "aCEeJDULD2MTeC0yLnYTQh9-IThdKTA2_TijYmBRGIB_WFi4o5iTdgAt", "_mounts" => "0", "_track_static" => %{"0" => "http://localhost:4000/assets/app.css", "1" => "http://localhost:4000/assets/app.js"}, "vsn" => "2.0.0"}
JS: %Phoenix.LiveView.JS{ops: []}

[josevalim]

This is correct. The function is called when you render and it should emit JS commands. The JS commands are then rendered and executed later by the browser on click. So the click will execute the JS commands, not the given function.