livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-03-01 09:24:05 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix tab content disappearning in nested tabs

Browse source
This commit is contained in:
Jonatan Kłosko 2025-02-13 16:00:04 +09:00
parent 0b5da01bd4
commit c9f619a84a
1 changed files with 6 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
lib/livebook_web/live/output/tabs_component.ex
View file

@ -39,15 +39,18 @@ defmodule LivebookWeb.Output.TabsComponent do
~H""" ~H"""
<div id={@id}> <div id={@id}>
<div class="tabs mb-2" id={"#{@id}-tabs"}> <div class="tabs mb-2" id={"#{@id}-tabs"}>
<%!-- Note that we use > in the phx-click selectors, because there may be nested tabs --%>
<button <button
:for={{output_idx, label} <- @labels} :for={{output_idx, label} <- @labels}
id={"#{@id}-tabs-#{output_idx}"} id={"#{@id}-tabs-#{output_idx}"}
class={["tab", output_idx == @active_idx && "active"]} class={["tab", output_idx == @active_idx && "active"]}
phx-click={ phx-click={
JS.remove_class("active", to: "##{@id}-tabs .tab.active") JS.remove_class("active", to: "##{@id}-tabs > .tab.active")
|> JS.add_class("active") |> JS.add_class("active")
|> JS.add_class("hidden", to: "##{@id} [data-tab-content]:not(.hidden)") |> JS.add_class("hidden", to: "##{@id}-tab-contents > [data-tab-content]:not(.hidden)")
|> JS.remove_class("hidden", to: ~s/##{@id} [data-tab-content="#{output_idx}"]/) |> JS.remove_class("hidden",
to: ~s/##{@id}-tab-contents > [data-tab-content="#{output_idx}"]/
)
} }
> >
{label} {label}