Add nested tabset support and defer tab activation to pageshow

activateTabsWithMatches() now walks up ancestor tab panes so matches
inside nested tabsets activate both outer and inner tabs (outermost
first via DOM depth sorting).

Tab activation is deferred from DOMContentLoaded to a pageshow listener.
This ensures it runs after tabsets.js restores grouped tab state from
localStorage, so search results override stored tab preferences without
flash. Listener ordering is guaranteed because tabsets.js (a module)
registers its pageshow handler before DOMContentLoaded fires.

Co-Authored-By: Claude Opus 4.6 <[email protected]>

Author: cderv

src/resources/projects/website/search/quarto-search.js

@@ -47,8 +47,17 @@ window.document.addEventListener("DOMContentLoaded", function (_event) {
     // perform any highlighting
     highlight(escapeRegExp(query), mainEl);
 
-    // activate tabs that contain highlighted matches
-    activateTabsWithMatches(mainEl);
+    // Activate tabs that contain highlighted matches on pageshow rather than
+    // DOMContentLoaded. tabsets.js (loaded as a module) registers its pageshow
+    // handler during module execution, before DOMContentLoaded. By registering
+    // ours during DOMContentLoaded, listener ordering guarantees we run after
+    // tabsets.js restores tab state from localStorage — so search activation
+    // wins over stored tab preference.
+    window.addEventListener("pageshow", function (event) {
+      if (!event.persisted) {
+        activateTabsWithMatches(mainEl);
+      }
+    }, { once: true });
 
     // fix up the URL to remove the q query param
     const replacementUrl = new URL(window.location);
@@ -1133,21 +1142,20 @@ function escapeRegExp(string) {
 
 // After search highlighting, activate any tabs whose panes contain <mark> matches.
 // This ensures that search results inside inactive Bootstrap tabs become visible.
-// Only switches tabs when no match is already visible in the active tab of that tabset.
+// Handles nested tabsets by walking up ancestor panes and activating outermost first.
 function activateTabsWithMatches(mainEl) {
   if (typeof bootstrap === "undefined") return;
 
   const marks = mainEl.querySelectorAll("mark");
   if (marks.length === 0) return;
 
-  // Group marks by their parent tabset (.tab-content container)
+  // Collect all tab panes that contain marks, including ancestor panes for nesting.
+  // Group by their parent tabset (.tab-content container).
   const tabsetMatches = new Map();
-  for (const mark of marks) {
-    const pane = mark.closest(".tab-pane");
-    if (!pane) continue;
-    const tabContent = pane.closest(".tab-content");
-    if (!tabContent) continue;
 
+  const recordPane = (pane) => {
+    const tabContent = pane.closest(".tab-content");
+    if (!tabContent) return;
     if (!tabsetMatches.has(tabContent)) {
       tabsetMatches.set(tabContent, { activeHasMatch: false, firstInactivePane: null });
     }
@@ -1157,10 +1165,25 @@ function activateTabsWithMatches(mainEl) {
     } else if (!info.firstInactivePane) {
       info.firstInactivePane = pane;
     }
+  };
+
+  for (const mark of marks) {
+    // Walk up all ancestor tab panes (handles nested tabsets)
+    let pane = mark.closest(".tab-pane");
+    while (pane) {
+      recordPane(pane);
+      pane = pane.parentElement?.closest(".tab-pane") ?? null;
+    }
   }
 
-  // For each tabset, only activate if the active tab has no match
-  for (const [, info] of tabsetMatches) {
+  // Sort tabsets by DOM depth (outermost first) so outer tabs activate before inner
+  const sorted = [...tabsetMatches.entries()].sort((a, b) => {
+    const depthA = ancestorCount(a[0], mainEl);
+    const depthB = ancestorCount(b[0], mainEl);
+    return depthA - depthB;
+  });
+
+  for (const [, info] of sorted) {
     if (info.activeHasMatch || !info.firstInactivePane) continue;
 
     const escapedId = CSS.escape(info.firstInactivePane.id);
@@ -1173,6 +1196,16 @@ function activateTabsWithMatches(mainEl) {
   }
 }
 
+function ancestorCount(el, stopAt) {
+  let count = 0;
+  let node = el.parentElement;
+  while (node && node !== stopAt) {
+    count++;
+    node = node.parentElement;
+  }
+  return count;
+}
+
 // highlight matches
 function highlight(term, el) {
   const termRegex = new RegExp(term, "ig");

tests/docs/playwright/html/search-tabsets/index.qmd

@@ -47,3 +47,43 @@ This tab contains delta-r-only-term that is only in the R tab.
 This tab contains python-only-content in the Python tab.
 
 :::
+
+## Second Grouped Tabset
+
+::: {.panel-tabset group="language"}
+
+### R
+
+This tab shows R content in the second grouped tabset.
+
+### Python
+
+This tab shows Python content in the second grouped tabset.
+
+:::
+
+## Nested Tabset
+
+::: {.panel-tabset}
+
+### Outer Tab A
+
+This is outer-tab-a-content in the default active outer tab.
+
+### Outer Tab B
+
+Content in outer tab B.
+
+::: {.panel-tabset}
+
+#### Inner Tab X
+
+This is inner-tab-x-content in the default active inner tab.
+
+#### Inner Tab Y
+
+This tab contains nested-inner-only-term that is only in this deeply nested inactive tab.
+
+:::
+
+:::