softr-vibe-coding 1.11.0 → 1.11.1

package/CHANGELOG.md

@@ -4,6 +4,9 @@ All notable changes to this skill are documented here. Versions follow [Semantic
 
 Entries from 1.3.1 onward are generated automatically from git commit subjects between version bumps (see `.github/workflows/publish.yml`). Entries before 1.3.1 were backfilled by hand from the existing commit history.
 
+## [1.11.1] - 2026-06-12
+- Document the tabbed-list visibility gotcha in native-block-filters.md — Softr renders tabs with Radix and keeps the INACTIVE tab's blocks in the DOM (display:none, not unmounted), so a data-block-id lookup on a tabbed page matches BOTH tabs' lists; injecting a custom control into the hidden one makes it 'disappear' on tab switch. Add §4d: require the matched block to be visible (offsetParent !== null) and home into whichever tab is active so one control follows all tabs (each tab-list keeps its own conditional filter; ~250ms interval for snappier flips), plus a Gotchas bullet. Bump to 1.11.1
+
 ## [1.11.0] - 2026-06-12
 - Add references/native-block-filters.md — dynamic date / URL-param filters and custom filter controls on native Softr List/Grid blocks. Covers driving a native block's conditional filter from a Custom Code Static block via {URL_PARAM:…}, the empty-param 'match nothing' wide-range sentinel that otherwise empties the list on load, injecting the control into the block's filter row scoped by data-block-id (a page-wide text search wrongly matches the nav 'Clients' link), resolving the row by filter-label-text + lowest-common-ancestor instead of hashed chip classes, and the key gotcha that Softr re-renders its List/Grid block and discards injected nodes so the control must be re-homed on a short interval rather than relocated once. Includes a full worked date-range picker (wide-range sentinel + wait-for-both + Clear + relocation + re-render survival) and a DevTools how-to for finding data-block-id and the filter row. Wire into the SKILL.md reference table and README structure listing; bump to 1.11.0
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softr-vibe-coding",
-  "version": "1.11.0",
+  "version": "1.11.1",
   "description": "Claude Code skill for generating production-ready Softr Vibe Coding blocks (JSX). Installs into ~/.claude/skills/ and auto-updates on each Claude Code session.",
   "bin": {
     "softr-vibe-coding": "./bin/cli.js"

package/references/native-block-filters.md

@@ -172,6 +172,29 @@ setInterval(ensureHomed, 500); // and re-home after every Softr re-render
 
 `ensureHomed` is idempotent (it only re-appends when the control is *not* already in the row), so the interval is cheap and can't loop.
 
+### 4d. Tabbed pages — home into the VISIBLE tab's list ⚠️
+**Softr renders tabs with Radix, and the *inactive* tab's blocks stay in the DOM — just `display:none`, not unmounted.** So on a tabbed page (e.g. a worker "Pending / All" view) *both* tabs' list blocks match a `data-block-id` lookup. Grab the hidden one and your control gets injected into the invisible panel — it looks like it "vanished" the moment the user switches tabs.
+
+Two rules:
+1. **Require the matched block to be visible** — `el.offsetParent !== null` (it's `null` when the element or an ancestor tab panel is `display:none`). Skip hidden matches.
+2. **One control can serve every tab** — list all the tab-lists' block-ids and home into whichever is visible; the re-home interval then makes the control *follow the active tab*.
+
+```js
+// Both tab lists. Softr keeps the INACTIVE tab's list in the DOM (hidden), so an id-only
+// match could grab the wrong one — only the VISIBLE tab's block should win.
+var LIST_BLOCK_IDS = ["<pending-tab-list-id>", "<all-tab-list-id>"];
+
+function activeListBlock() {
+  for (var i = 0; i < LIST_BLOCK_IDS.length; i++) {
+    var el = document.querySelector('[data-block-id="' + LIST_BLOCK_IDS[i] + '"]');
+    if (el && el.offsetParent !== null) return el; // offsetParent === null → in a hidden tab
+  }
+  return null;
+}
+```
+
+Use `activeListBlock()` in place of the single-id lookup inside `findFilterRow()`. Each tab-list still needs its OWN copy of the conditional filter (the control only sets the URL params; every list reads them independently). A ~250ms interval feels snappier than 500ms when the user flips tabs.
+
 ---
 
 ## 5. Full worked example — date-range picker that joins the filter row
@@ -280,6 +303,7 @@ A complete Custom Code Static block: range picker with the wide-range sentinel,
 
 - **Empty `{URL_PARAM}` = match NOTHING.** A blank/missing param empties a filtered list. Seed a wide sentinel range (and map it back to blank inputs) so "no selection" shows all. §2.
 - **Softr re-renders its list block and discards injected nodes.** One-shot relocation vanishes on the first interaction. Re-home on an interval/observer. §4c.
+- **Tabbed pages keep the inactive tab's list in the DOM (`display:none`).** A `data-block-id` match can grab the hidden tab's copy → the injected control "disappears" on tab switch. Require `offsetParent !== null` and home into the visible list; one control can follow all tabs. §4d.
 - **Page-wide DOM searches hit the native chrome.** Matching by text "Client" also matches a "Clients" nav link → control lands in the sidebar. Always scope to the block's `data-block-id`. §4a.
 - **Filter chips have only hashed classes** (`a0e85ef_…`) that change on deploys. Anchor on your **filter label text + lowest common ancestor**; keep the hash as a fallback only. §4b.
 - **`window.location.reload()` is how Softr re-reads the param.** `replaceState` alone updates the URL but won't re-run the conditional filter — you must reload.