From c9f619a84a8b7de954c7880770f76b1543f63858 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Thu, 13 Feb 2025 16:00:04 +0900
Subject: [PATCH] Fix tab content disappearning in nested tabs

---
 lib/livebook_web/live/output/tabs_component.ex | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/lib/livebook_web/live/output/tabs_component.ex b/lib/livebook_web/live/output/tabs_component.ex
index 12e9d2bcd..d16cf965f 100644
--- a/lib/livebook_web/live/output/tabs_component.ex
+++ b/lib/livebook_web/live/output/tabs_component.ex
@@ -39,15 +39,18 @@ defmodule LivebookWeb.Output.TabsComponent do
     ~H"""
     <div id={@id}>
       <div class="tabs mb-2" id={"#{@id}-tabs"}>
+        <%!-- Note that we use > in the phx-click selectors, because there may be nested tabs --%>
         <button
           :for={{output_idx, label} <- @labels}
           id={"#{@id}-tabs-#{output_idx}"}
           class={["tab", output_idx == @active_idx && "active"]}
           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("hidden", to: "##{@id} [data-tab-content]:not(.hidden)")
-            |> JS.remove_class("hidden", to: ~s/##{@id} [data-tab-content="#{output_idx}"]/)
+            |> JS.add_class("hidden", to: "##{@id}-tab-contents > [data-tab-content]:not(.hidden)")
+            |> JS.remove_class("hidden",
+              to: ~s/##{@id}-tab-contents > [data-tab-content="#{output_idx}"]/
+            )
           }
         >
           {label}