Updated Hook get triggered when it shouldn't

Phoenix Forum Questions / Help
,
1

Hello,

i stumbled upon a problem that i recreated with this piece of code

defmodule AppWeb.FooLive do
  use AppWeb, :live_view

  def render(assigns) do
    ~H"""
    <div phx-hook="Updated" id="block">
    <%= @is_open %>
    </div>
    <button phx-click="clicked" class="px-3 py-1 rounded-full border bg-neutral-100">
      click to update the div
    </button>
    <.link patch={~p"/test/open"} >OPEN</.link>
    <.link :if={@live_action == :open} patch={~p"/test"} >Close</.link>
    """
    end

    def mount(params, session, socket) do
      {:ok, socket |> assign(:is_open, false)}
    end

    def handle_params(params, uri, socket) do
      {:noreply, apply_action(socket, socket.assigns.live_action ,params)}
    end

    defp apply_action(socket, :index, _params) do
    dbg(self())
      socket
    end

    defp apply_action(socket, :open, _params) do
    dbg(self())
      socket
    end

    def handle_event("clicked", unsigned_params, socket) do
      {:noreply, socket |> assign(:is_open, !socket.assigns.is_open)}
    end

end

here is the Updated hook that trigger the css animation

Hooks.Updated = {
  updated() {
    this.el.style.animation = "updated 1s"
  }
}

On phx-click="clicked" the phx-hook="Updated" trigger a css animation.

The issue is once the phx-click="clicked" event happend, each time i click on the Close button it re trigger the phx-hook="Updated" animation IF the button is inside an :if={@live_action == :open}

Even weirder, if i have multiple close buttons with & without :if some will trigger the hook and other won’t

I’m a beginner with liveview so i’m probably doing something wrong but how do i prevent the animation to be triggered again ?