`active` tab attribute does not dynamically update tabs current active tab

[tanguilp]

Hi again,

I want to use some links to patch my LiveView with the tab as a parameter:

  @impl true
  def handle_params(params, _uri, socket) do
    {:noreply, assign(socket, :amenity_type, params["amenity"])}
  end

and then using this assign in tabs with the active attribute:

        <:tab
          icon="hero-squares-2x2"
          active={@amenity_type == "shop"}
          on_select={JS.patch(~p"/some/path?amenity=shop")}
        >
        </:tab>
        <:tab
          icon="hero-xyz"
          active={@amenity_type == "restaurant"}
          on_select={JS.patch(~p"/some/path?amenity=restaurant")}
        >
        </:tab>

So far, so good. It works.

But when I patch from another place in the page, for example:

<.link patch={~p"/some/path?amenity=restaurant"}>
Go to restaurants
</.link>

then nothing happens: the current tab stays the same.

In other words active seems to work only on initial rendering, then it becomes dead. Is that the normal behaviour?

I know about VoyageeWeb.Components.Tabs.show_tab/3 but i'D prefer not to use it and rely on active only.

Cheers!

[shahryarjb]

Hi dear @tanguilp yes, i think because phx-mounted fires once when the element first enters the DOM and you want re-render it dose not work

and i think we need phx-hook + data-active-tab something like this if we want to do this!
and for now tabs is pure css and phoenix component! not has any js file

collected hooks can help you to do this with ai in your tabs component?

[shahryarjb]

i did not test it just got from ai
https://gist.github.com/shahryarjb/6155c593fa6ab29c16c64fbd87eea3b0