@viliha/vui-ui 1.13.0 → 1.13.1

package/CHANGELOG.md

@@ -7,6 +7,19 @@ backward-compatible features, **major** for breaking changes.
 
 To upgrade, see [Upgrading](./AGENT.md#upgrading) in the agent guide.
 
+## 1.13.1 — 2026-07-26
+
+### Fixed
+
+- **Keep-alive tabs now truly preserve a page's live state across tab switches**
+  (within `NEXT_PUBLIC_MAX_TABS`). The scaffold's `KeepAliveTabs` was overwriting
+  a route's cached element with Next's fresh `children` on every re-activation,
+  which remounted the page and threw away its state — so a server-backed table
+  (e.g. the Data Table demo) refetched every time you returned to its tab. It now
+  caches each route's element once and reuses it, so switching away and back keeps
+  the loaded data, scroll, and form state with no reload. Query-param routes
+  (`/organizations/edit?id=…`) still update via their own `useSearchParams`.
+
 ## 1.13.0 — 2026-07-26
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@viliha/vui-ui",
-  "version": "1.13.0",
+  "version": "1.13.1",
   "description": "Vui UI — a clean, token-driven React admin/CRM component library built on Tailwind CSS v4, shadcn-style patterns, and Radix Icons. Ships as TypeScript source (Just-in-Time), compiled by the consuming app.",
   "license": "MIT",
   "author": "Suman Bonakurthi",

package/template/app/_components/open-tabs.tsx

@@ -503,11 +503,14 @@ export function KeepAliveTabs({ children }: { children: React.ReactNode }) {
   const active = tabKey(usePathname());
   const { tabs } = useOpenTabs();
   const cache = React.useRef(new Map<string, React.ReactNode>());
-  // Refresh the active route's element (so re-opening an /edit tab with a
-  // different record shows the right data); inactive tabs keep their cached
-  // element and stay mounted. In-progress form work survives via RecordForm's
-  // sessionStorage draft (see persistKey), which is StrictMode-safe.
-  cache.current.set(active, children);
+  // Cache each route's element ONCE, on first activation, and reuse it — never
+  // overwrite on re-activation. Reusing the same element reference is what lets
+  // React keep the mounted instance (and its loaded data / scroll / form state)
+  // across tab switches; overwriting with Next's fresh `children` would remount
+  // the subtree and reload everything. Routes that vary by query param (e.g.
+  // /organizations/edit?id=…) share one tab and update themselves via
+  // `useSearchParams`, so they don't need a refresh here.
+  if (!cache.current.has(active)) cache.current.set(active, children);
   // Drop entries for tabs that have been closed.
   const open = new Set(tabs.map((t) => t.href));
   for (const key of [...cache.current.keys()]) {