fix: protect directive not revealing when wrapping tabs

mikebarkmin · Copilot · mikebarkmin · commit 39cf0edefa4d · 2026-04-12T18:38:19.000+02:00
The protect client.js used getElementsByTagName('input')[0] to find
the password input, which grabbed the first input in the entire subtree.
When protect wrapped tabs, this selected a tab radio input instead of
the password input, so event listeners were attached to the wrong
element and password entry was silently ignored.

Scope both selectors to direct children using :scope queries:
- Input: el.querySelector(':scope &gt; .password-input input')
- Hidden: el.querySelector(':scope &gt; .hidden')

Co-authored-by: Copilot &lt;223556219+Copilot@users.noreply.github.com&gt;
diff --git a/.changeset/fix-protect-inside-tabs.md b/.changeset/fix-protect-inside-tabs.md
@@ -0,0 +1,5 @@
+---
+"@hyperbook/markdown": patch
+---
+
+Fix protect directive not revealing content when wrapping tabs or other directives containing input elements. The password input selector now scopes to the direct child `.password-input` container instead of selecting the first input in the entire subtree.
diff --git a/packages/markdown/assets/directive-protect/client.js b/packages/markdown/assets/directive-protect/client.js
@@ -54,7 +54,7 @@ hyperbook.protect = (function () {
   function init(root) {
     const els = root.getElementsByClassName("directive-protect");
     for (let el of els) {
-      const inputEl = el.getElementsByTagName("input")[0];
+      const inputEl = el.querySelector(":scope > .password-input input");
       const id = el.getAttribute("data-id");
 
       if (!inputEl) continue;
@@ -66,7 +66,7 @@ hyperbook.protect = (function () {
         }
       });
 
-      const hiddenEL = el.getElementsByClassName("hidden")[0];
+      const hiddenEL = el.querySelector(":scope > .hidden");
       el.removeChild(hiddenEL);
 
       onUpdateToast(inputEl, el, hiddenEL);
diff --git a/website/en/book/changelog.md b/website/en/book/changelog.md
@@ -38,6 +38,18 @@ If you need a new feature, open an [issue](https://github.com/openpatch/hyperboo
 ::::
 -->
 
+## v0.89.2
+
+::::tabs
+
+:::tab{title="Fixed :bug:" id="fixed"}
+
+- Fix protect directive not revealing content when wrapping tabs or other directives containing input elements.
+
+:::
+
+::::
+
 ## v0.89.1
 
 ::::tabs

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@hyperbook/markdown": patch
 +---
++
 +Fix protect directive not revealing content when wrapping tabs or other directives containing input elements. The password input selector now scopes to the direct child `.password-input` container instead of selecting the first input in the entire subtree.