@nanobpm/urban 0.23.0 → 0.23.1

package/dist/runtime/core/modules/pages.js

@@ -721,6 +721,16 @@ function renderDataGrid(node) {
     }
   }
 
+  // Is the user actively typing inside this grid? tbody.replaceChildren() in refresh()
+  // detaches the subtree, and detaching the node that holds document.activeElement blurs
+  // it — so an open detail form (where you answer an escalation) loses focus every
+  // refreshMs even though #103 preserves its half-typed value. Used to skip the poll.
+  const editingInGrid = () => {
+    const a = document.activeElement;
+    if (!a || !tbody.contains(a)) return false;
+    return a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT" || a.isContentEditable;
+  };
+
   async function refresh() {
     try {
       const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
@@ -732,15 +742,42 @@ function renderDataGrid(node) {
         for (const k of [...detailNodes.keys()]) if (!live.has(k)) detailNodes.delete(k);
         for (const k of [...expanded]) if (!live.has(k)) expanded.delete(k);
       }
+      // Capture focus + caret before the DOM swap. replaceChildren() detaches (and so blurs)
+      // the reused detail node; re-appending it restores its value but not its focus. If the
+      // very same node is re-attached (an open, still-present row), put the caret back.
+      const active = document.activeElement;
+      const keepFocus = !!active && tbody.contains(active);
+      let selStart = null, selEnd = null, savedRange = null;
+      if (keepFocus) {
+        if (active.isContentEditable) {
+          // contenteditable has no selectionStart — its caret lives in the document
+          // selection. The reused node is re-attached, so the cloned range still points
+          // at live containers and can be restored after focus.
+          try { const s = document.getSelection(); if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange(); } catch (e) { /* selection unavailable */ }
+        } else {
+          try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch (e) { /* non-text field */ }
+        }
+      }
       tbody.replaceChildren();
       for (const row of rows) renderRow(row);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));
+      if (keepFocus && active.isConnected) {
+        active.focus();
+        if (savedRange) {
+          try { const s = document.getSelection(); s.removeAllRanges(); s.addRange(savedRange); } catch (e) { /* selection unavailable */ }
+        } else if (selStart != null && typeof active.setSelectionRange === "function") {
+          try { active.setSelectionRange(selStart, selEnd); } catch (e) { /* non-text field */ }
+        }
+      }
     } catch (e) {
       tbody.replaceChildren(el("tr", {}, el("td", { colspan: span }, String(e.message || e))));
     }
   }
   document.addEventListener("pc:refresh", refresh);
-  if (p.refreshMs && p.refreshMs > 0) setInterval(refresh, p.refreshMs);
+  // Skip the automatic poll while the user is typing in the grid — an explicit pc:refresh
+  // (e.g. after submitting an answer) still runs — so rows never shift under an in-progress
+  // answer and the detail input keeps focus across ticks.
+  if (p.refreshMs && p.refreshMs > 0) setInterval(() => { if (!editingInGrid()) refresh(); }, p.refreshMs);
   refresh();
   return card;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanobpm/urban",
-  "version": "0.23.0",
+  "version": "0.23.1",
   "description": "Urban: build and run code-first apps on Nano — runtime, derivation toolkit, and CLI in one. Author durable processes with @nanobpm/workflow (defineFlow), a typed datasource, forms, triggers and surfaces from a nano.app.json manifest, on Node or Deno.",
   "license": "Apache-2.0",
   "type": "module",

package/src/runtime/core/modules/pages.test.ts

@@ -110,6 +110,26 @@ test("renderer preserves grid row-detail expansion across refreshes", async () =
   assert.match(js, /v == null \? null : String\(v\)/);
 });
 
+test("renderer keeps the detail input focused across the refresh poll", async () => {
+  // Regression: #103 reused the open detail node so a half-typed answer survived, but
+  // tbody.replaceChildren() still detaches (and so blurs) that node, dropping the caret
+  // every refreshMs. The client now (1) skips the timer-driven poll while the user is
+  // editing in the grid, and (2) restores focus + selection across any refresh that runs.
+  const res = await dispatch("GET", "/app/runtime.js");
+  const js = res.body ?? "";
+  // (1) The automatic poll is gated on not-editing; an explicit pc:refresh still runs.
+  assert.match(js, /const editingInGrid = \(\)\s*=>/);
+  assert.match(js, /setInterval\(\s*\(\)\s*=>\s*\{\s*if\s*\(\s*!editingInGrid\(\)\s*\)\s*refresh\(\)\s*;?\s*\}\s*,\s*p\.refreshMs\s*\)/);
+  // (2) Focus + caret are captured before replaceChildren() and restored to the reused node.
+  assert.match(js, /const keepFocus = !!active && tbody\.contains\(active\)/);
+  assert.match(js, /active\.selectionStart/);
+  assert.match(js, /if \(keepFocus && active\.isConnected\)/);
+  assert.match(js, /active\.setSelectionRange\(selStart, selEnd\)/);
+  // contenteditable carets are preserved via the document selection range.
+  assert.match(js, /active\.isContentEditable/);
+  assert.match(js, /s\.addRange\(savedRange\)/);
+});
+
 test("renderer wires a column's linkField to a new-tab anchor", async () => {
   const res = await dispatch("GET", "/app/runtime.js");
   const js = res.body ?? "";

package/src/runtime/core/modules/pages.ts

@@ -752,6 +752,16 @@ function renderDataGrid(node) {
     }
   }
 
+  // Is the user actively typing inside this grid? tbody.replaceChildren() in refresh()
+  // detaches the subtree, and detaching the node that holds document.activeElement blurs
+  // it — so an open detail form (where you answer an escalation) loses focus every
+  // refreshMs even though #103 preserves its half-typed value. Used to skip the poll.
+  const editingInGrid = () => {
+    const a = document.activeElement;
+    if (!a || !tbody.contains(a)) return false;
+    return a.tagName === "INPUT" || a.tagName === "TEXTAREA" || a.tagName === "SELECT" || a.isContentEditable;
+  };
+
   async function refresh() {
     try {
       const { rows } = await getJSON(dataUrl(p.data.source, p.data.table, activeFilter, p.data.orderBy));
@@ -763,15 +773,42 @@ function renderDataGrid(node) {
         for (const k of [...detailNodes.keys()]) if (!live.has(k)) detailNodes.delete(k);
         for (const k of [...expanded]) if (!live.has(k)) expanded.delete(k);
       }
+      // Capture focus + caret before the DOM swap. replaceChildren() detaches (and so blurs)
+      // the reused detail node; re-appending it restores its value but not its focus. If the
+      // very same node is re-attached (an open, still-present row), put the caret back.
+      const active = document.activeElement;
+      const keepFocus = !!active && tbody.contains(active);
+      let selStart = null, selEnd = null, savedRange = null;
+      if (keepFocus) {
+        if (active.isContentEditable) {
+          // contenteditable has no selectionStart — its caret lives in the document
+          // selection. The reused node is re-attached, so the cloned range still points
+          // at live containers and can be restored after focus.
+          try { const s = document.getSelection(); if (s && s.rangeCount) savedRange = s.getRangeAt(0).cloneRange(); } catch (e) { /* selection unavailable */ }
+        } else {
+          try { selStart = active.selectionStart; selEnd = active.selectionEnd; } catch (e) { /* non-text field */ }
+        }
+      }
       tbody.replaceChildren();
       for (const row of rows) renderRow(row);
       if (!rows.length) tbody.append(el("tr", {}, el("td", { colspan: span }, "No rows")));
+      if (keepFocus && active.isConnected) {
+        active.focus();
+        if (savedRange) {
+          try { const s = document.getSelection(); s.removeAllRanges(); s.addRange(savedRange); } catch (e) { /* selection unavailable */ }
+        } else if (selStart != null && typeof active.setSelectionRange === "function") {
+          try { active.setSelectionRange(selStart, selEnd); } catch (e) { /* non-text field */ }
+        }
+      }
     } catch (e) {
       tbody.replaceChildren(el("tr", {}, el("td", { colspan: span }, String(e.message || e))));
     }
   }
   document.addEventListener("pc:refresh", refresh);
-  if (p.refreshMs && p.refreshMs > 0) setInterval(refresh, p.refreshMs);
+  // Skip the automatic poll while the user is typing in the grid — an explicit pc:refresh
+  // (e.g. after submitting an answer) still runs — so rows never shift under an in-progress
+  // answer and the detail input keeps focus across ticks.
+  if (p.refreshMs && p.refreshMs > 0) setInterval(() => { if (!editingInGrid()) refresh(); }, p.refreshMs);
   refresh();
   return card;
 }