@rozie-ui/data-table-solid 0.1.0 → 0.1.1

package/README.md

@@ -529,5 +529,5 @@ The `detail` (expandable rows), `groupBar` (grouping) and `filter` (faceted filt
 | filter | columnId, value, uniqueValues, minMax, setFilter |
 | selectCell | row, checked, toggle |
 | cell | columnId, column, row, value |
-| editor | columnId, column, row, value, commit, cancel |
+| editor | columnId, column, row, value, commit, cancel, autofocus |
 | detail | row |

package/dist/index.cjs

@@ -738,6 +738,7 @@ function DataTable(_props) {
 	const [draftValue, setDraftValue] = (0, Solid_js.createSignal)(null);
 	const [invalidMsg, setInvalidMsg] = (0, Solid_js.createSignal)("");
 	const [editVer, setEditVer] = (0, Solid_js.createSignal)(0);
+	const [editFocusColId, setEditFocusColId] = (0, Solid_js.createSignal)(null);
 	const [editingRowIndex, setEditingRowIndex] = (0, Solid_js.createSignal)(null);
 	const [rowDraft, setRowDraft] = (0, Solid_js.createSignal)({});
 	const [rangeAnchor, setRangeAnchor] = (0, Solid_js.createSignal)(null);
@@ -3180,6 +3181,7 @@ function DataTable(_props) {
 	}
 	function focusEditorWhenReady(selectAll = true) {
 		if (!gridRoot) return;
+		if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
 		let attempts = 0;
 		const tryFocus = () => {
 			const el = gridRoot ? gridRoot.querySelector("[data-editing-cell]") : null;
@@ -3230,6 +3232,7 @@ function DataTable(_props) {
 		setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(colId);
 		focusEditorWhenReady(seed == null);
 	}
 	function focusCellWhenReady(row, col) {
@@ -3266,6 +3269,7 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
 	}
 	function endRowEdit() {
 		setEditingRowIndex(null);
@@ -3273,6 +3277,14 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
+	}
+	function editorAutofocusFor(colId, rowIndex) {
+		if (editVer() < 0) return false;
+		if (editingRowIndex() != null) {
+			if (editingRowIndex() !== rowIndex) return false;
+		} else if (editingRow() !== rowIndex) return false;
+		return editFocusColId() != null && editFocusColId() === colId;
 	}
 	function coerceCellValue(colId, raw) {
 		if (editorTypeOf(colId) !== "number") return raw;
@@ -3391,6 +3403,8 @@ function DataTable(_props) {
 	}
 	function focusRowEditorAt(rowIndex, colIndex) {
 		if (!gridRoot) return;
+		const colId = columnIdAt(rowIndex, colIndex);
+		if (colId != null && hasEditorSlot(colId)) return;
 		let attempts = 0;
 		const tryFocus = () => {
 			const cellEl = resolveCellEl(String(rowIndex), colIndex);
@@ -3431,6 +3445,7 @@ function DataTable(_props) {
 		setEditingRowIndex(rowIndex);
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(editable[0].colId);
 		focusEditorWhenReady();
 	}
 	function commitRow() {
@@ -3450,6 +3465,8 @@ function DataTable(_props) {
 			const err = runValidator(ec.colId, coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 			if (err !== true) {
 				setInvalid(err);
+				setEditFocusColId(ec.colId);
+				setEditVer(editVer() + 1);
 				focusRowEditorAt(rowIndex, ec.colIndex);
 				return false;
 			}
@@ -3623,7 +3640,10 @@ function DataTable(_props) {
 		let pos = cols.indexOf(cur);
 		if (pos < 0) pos = 0;
 		const len = cols.length;
-		focusRowEditorAt(rowIndex, cols[backward ? (pos - 1 + len) % len : (pos + 1) % len]);
+		const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+		setEditFocusColId(editable[nextPos].colId);
+		setEditVer(editVer() + 1);
+		focusRowEditorAt(rowIndex, cols[nextPos]);
 	}
 	function onEditorKeyDown(e) {
 		if (!e) return;
@@ -4042,7 +4062,8 @@ function DataTable(_props) {
 		row: row().original,
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor()
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
 	})}
               </span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
@@ -4231,7 +4252,8 @@ function DataTable(_props) {
 		row: wr().row.original,
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor()
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
 	})}
               </span></Solid_js.Show>}</span></Solid_js.Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={(0, _rozie_runtime_solid.rozieAttr)(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
@@ -4406,16 +4428,25 @@ function EditorText(_props) {
 		row: null,
 		value: null,
 		commit: null,
-		cancel: null
+		cancel: null,
+		autofocus: false
 	}, _props), [
 		"columnId",
 		"column",
 		"row",
 		"value",
 		"commit",
-		"cancel"
+		"cancel",
+		"autofocus"
 	]);
 	const [draft, setDraft] = (0, Solid_js.createSignal)("");
+	(0, Solid_js.onMount)(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	(0, Solid_js.createEffect)((0, Solid_js.on)(() => local.autofocus, (v) => (0, Solid_js.untrack)(() => ((v) => {
+		if (v) inputElRef?.focus();
+	})(v)), { defer: true }));
+	let inputElRef = null;
 	setDraft(local.value != null ? String(local.value) : "");
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
@@ -4439,7 +4470,9 @@ function EditorText(_props) {
 		doCommit();
 	}
 	return <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
+    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => {
+		inputElRef = el;
+	}} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
 		onInput($event);
 	}} onKeyDown={($event) => {
 		onKeydown($event);

package/dist/index.d.cts

@@ -42,6 +42,7 @@ interface EditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  autofocus: any;
 }
 interface DetailSlotCtx {
   row: any;
@@ -339,6 +340,10 @@ interface EditorTextProps {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   cancel?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
 }
 declare function EditorText(_props: EditorTextProps): JSX.Element;
 //#endregion

package/dist/index.d.mts

@@ -42,6 +42,7 @@ interface EditorSlotCtx {
   value: any;
   commit: any;
   cancel: any;
+  autofocus: any;
 }
 interface DetailSlotCtx {
   row: any;
@@ -339,6 +340,10 @@ interface EditorTextProps {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   cancel?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
 }
 declare function EditorText(_props: EditorTextProps): JSX.Element;
 //#endregion

package/dist/index.mjs

@@ -734,6 +734,7 @@ function DataTable(_props) {
 	const [draftValue, setDraftValue] = createSignal(null);
 	const [invalidMsg, setInvalidMsg] = createSignal("");
 	const [editVer, setEditVer] = createSignal(0);
+	const [editFocusColId, setEditFocusColId] = createSignal(null);
 	const [editingRowIndex, setEditingRowIndex] = createSignal(null);
 	const [rowDraft, setRowDraft] = createSignal({});
 	const [rangeAnchor, setRangeAnchor] = createSignal(null);
@@ -3176,6 +3177,7 @@ function DataTable(_props) {
 	}
 	function focusEditorWhenReady(selectAll = true) {
 		if (!gridRoot) return;
+		if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
 		let attempts = 0;
 		const tryFocus = () => {
 			const el = gridRoot ? gridRoot.querySelector("[data-editing-cell]") : null;
@@ -3226,6 +3228,7 @@ function DataTable(_props) {
 		setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(colId);
 		focusEditorWhenReady(seed == null);
 	}
 	function focusCellWhenReady(row, col) {
@@ -3262,6 +3265,7 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
 	}
 	function endRowEdit() {
 		setEditingRowIndex(null);
@@ -3269,6 +3273,14 @@ function DataTable(_props) {
 		setInvalidMsg("");
 		setActiveInControl(false);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(null);
+	}
+	function editorAutofocusFor(colId, rowIndex) {
+		if (editVer() < 0) return false;
+		if (editingRowIndex() != null) {
+			if (editingRowIndex() !== rowIndex) return false;
+		} else if (editingRow() !== rowIndex) return false;
+		return editFocusColId() != null && editFocusColId() === colId;
 	}
 	function coerceCellValue(colId, raw) {
 		if (editorTypeOf(colId) !== "number") return raw;
@@ -3387,6 +3399,8 @@ function DataTable(_props) {
 	}
 	function focusRowEditorAt(rowIndex, colIndex) {
 		if (!gridRoot) return;
+		const colId = columnIdAt(rowIndex, colIndex);
+		if (colId != null && hasEditorSlot(colId)) return;
 		let attempts = 0;
 		const tryFocus = () => {
 			const cellEl = resolveCellEl(String(rowIndex), colIndex);
@@ -3427,6 +3441,7 @@ function DataTable(_props) {
 		setEditingRowIndex(rowIndex);
 		setActiveInControl(true);
 		setEditVer(editVer() + 1);
+		setEditFocusColId(editable[0].colId);
 		focusEditorWhenReady();
 	}
 	function commitRow() {
@@ -3446,6 +3461,8 @@ function DataTable(_props) {
 			const err = runValidator(ec.colId, coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
 			if (err !== true) {
 				setInvalid(err);
+				setEditFocusColId(ec.colId);
+				setEditVer(editVer() + 1);
 				focusRowEditorAt(rowIndex, ec.colIndex);
 				return false;
 			}
@@ -3619,7 +3636,10 @@ function DataTable(_props) {
 		let pos = cols.indexOf(cur);
 		if (pos < 0) pos = 0;
 		const len = cols.length;
-		focusRowEditorAt(rowIndex, cols[backward ? (pos - 1 + len) % len : (pos + 1) % len]);
+		const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+		setEditFocusColId(editable[nextPos].colId);
+		setEditVer(editVer() + 1);
+		focusRowEditorAt(rowIndex, cols[nextPos]);
 	}
 	function onEditorKeyDown(e) {
 		if (!e) return;
@@ -4038,7 +4058,8 @@ function DataTable(_props) {
 		row: row().original,
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor()
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row()))
 	})}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
@@ -4227,7 +4248,8 @@ function DataTable(_props) {
 		row: wr().row.original,
 		value: editorValueFor(cell().column.id),
 		commit: editorCommitFor(cell().column.id),
-		cancel: editorCancelFor()
+		cancel: editorCancelFor(),
+		autofocus: editorAutofocusFor(cell().column.id, wr().vi.index)
 	})}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? "Collapse group" : "Expand group")} class={"rdt-expander rdt-group-toggle"} onClick={($event) => {
@@ -4402,16 +4424,25 @@ function EditorText(_props) {
 		row: null,
 		value: null,
 		commit: null,
-		cancel: null
+		cancel: null,
+		autofocus: false
 	}, _props), [
 		"columnId",
 		"column",
 		"row",
 		"value",
 		"commit",
-		"cancel"
+		"cancel",
+		"autofocus"
 	]);
 	const [draft, setDraft] = createSignal("");
+	onMount(() => {
+		if (local.autofocus) inputElRef?.focus();
+	});
+	createEffect(on(() => local.autofocus, (v) => untrack(() => ((v) => {
+		if (v) inputElRef?.focus();
+	})(v)), { defer: true }));
+	let inputElRef = null;
 	setDraft(local.value != null ? String(local.value) : "");
 	function onInput(e) {
 		setDraft(e && e.target ? e.target.value : "");
@@ -4435,7 +4466,9 @@ function EditorText(_props) {
 		doCommit();
 	}
 	return <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
+    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => {
+		inputElRef = el;
+	}} class={"rdt-cell-editor"} value={draft()} onInput={($event) => {
 		onInput($event);
 	}} onKeyDown={($event) => {
 		onKeydown($event);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rozie-ui/data-table-solid",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "private": false,
   "license": "MIT",
@@ -46,7 +46,7 @@
   ],
   "dependencies": {
     "@solid-primitives/keyed": "^1.5.3",
-    "@rozie/runtime-solid": "0.1.3"
+    "@rozie/runtime-solid": "0.1.4"
   },
   "peerDependencies": {
     "solid-js": "^1.8",

package/src/DataTable.tsx

@@ -355,7 +355,7 @@ interface SelectCellSlotCtx { row: any; checked: any; toggle: any; }
 
 interface CellSlotCtx { columnId: any; column: any; row: any; value: any; }
 
-interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; }
+interface EditorSlotCtx { columnId: any; column: any; row: any; value: any; commit: any; cancel: any; autofocus: any; }
 
 interface DetailSlotCtx { row: any; }
 
@@ -630,6 +630,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   const [draftValue, setDraftValue] = createSignal<any>(null);
   const [invalidMsg, setInvalidMsg] = createSignal('');
   const [editVer, setEditVer] = createSignal(0);
+  const [editFocusColId, setEditFocusColId] = createSignal<any>(null);
   const [editingRowIndex, setEditingRowIndex] = createSignal<any>(null);
   const [rowDraft, setRowDraft] = createSignal<Record<string, any>>({});
   const [rangeAnchor, setRangeAnchor] = createSignal<any>(null);
@@ -5169,8 +5170,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // draft (selecting the seeded char makes the next keystroke replace it: Zeta → eta).
   // beginEdit threads `seed == null` so a seeded entry skips the select and the caret sits
   // AFTER the seeded char; every other caller keeps the default select-all.
+  // Editor-owns-focus contract (quick 260711-i5m): REVERTS the g52 shadow-piercing helper
+  // (commit 5fa30045) that recursed into descendant shadow roots. Built-in editors are
+  // host-DOM — the plain direct query resolves them on all 6 targets (no shadow to cross). A
+  // #editor DROP-IN now owns its OWN focus via the reactive `autofocus` prop (EditorText's
+  // $onMount + lazy $watch), so the host never needs to reach across a Lit drop-in's nested
+  // shadow root at all — see the !hasEditorSlot gate below, which skips the host focus call
+  // entirely for a drop-in target.
   function focusEditorWhenReady(selectAll = true) {
     if (!gridRoot) return;
+    // Editor-owns-focus contract: when the CURRENT focus target is a #editor drop-in, the host
+    // does NOT reach into its DOM — the drop-in self-focuses via its own autofocus prop.
+    if (editFocusColId() != null && hasEditorSlot(editFocusColId())) return;
     let attempts = 0;
     const tryFocus = () => {
       const el = gridRoot ? gridRoot.querySelector('[data-editing-cell]') : null;
@@ -5246,6 +5257,10 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setDraftValue(seed != null ? seed : cellValueAt(rowIndex, colIndex));
     setActiveInControl(true);
     setEditVer(editVer() + 1);
+    // Editor-owns-focus contract (quick 260711-i5m): THIS cell's column is the current
+    // focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope prop
+    // from it. Cleared on endEdit.
+    setEditFocusColId(colId);
     // B2: a seeded (type-to-edit) entry must NOT select-all — keep the caret after the
     // seeded char so subsequent typing appends instead of replacing it.
     focusEditorWhenReady(seed == null);
@@ -5300,6 +5315,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setInvalidMsg('');
     setActiveInControl(false);
     setEditVer(editVer() + 1);
+    setEditFocusColId(null);
   }
 
   // endRowEdit: tear down full-row edit (shared by commitRow/cancelRow). Clears the row
@@ -5311,6 +5327,23 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setInvalidMsg('');
     setActiveInControl(false);
     setEditVer(editVer() + 1);
+    setEditFocusColId(null);
+  }
+
+  // editorAutofocusFor (quick 260711-i5m, editor-owns-focus contract): the reactive `autofocus`
+  // #editor scope prop for a given (colId, rowIndex) — true for EXACTLY the current focus-
+  // target cell, re-deriving on every editVer bump (mirrors isEditing's reactive gate so
+  // Svelte/Solid re-run this per-cell on a foreign-slot-callback state mutation). Works for
+  // BOTH single-cell ($data.editingRow) and row mode ($data.editingRowIndex) since
+  // $data.editFocusColId is set by both beginEdit and beginRowEdit/commitRow/rowEditTab.
+  function editorAutofocusFor(colId: any, rowIndex: any) {
+    if (editVer() < 0) return false;
+    if (editingRowIndex() != null) {
+      if (editingRowIndex() !== rowIndex) return false;
+    } else {
+      if (editingRow() !== rowIndex) return false;
+    }
+    return editFocusColId() != null && editFocusColId() === colId;
   }
 
   // B3: coerce the committed value by the column's built-in editor type at the single
@@ -5528,8 +5561,15 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
   // focuses its [data-editing-cell] control. Bounded rAF-poll (mirrors focusEditorWhenReady)
   // so a React re-render that recreates the input across the focus call still lands it. select-
   // all on text/number editors (a no-op try/catch on select/checkbox).
+  // Editor-owns-focus contract (quick 260711-i5m): when the TARGET column is a #editor
+  // drop-in, the host does NOT reach into its DOM (early return, before starting the rAF poll
+  // at all) — the drop-in self-focuses via its own reactive `autofocus` prop, which the caller
+  // (commitRow's B22 reject path / rowEditTab) already flips via $data.editFocusColId. Built-in
+  // columns are unaffected (hasEditorSlot is false for them) — unchanged host direct-focus.
   function focusRowEditorAt(rowIndex: any, colIndex: any) {
     if (!gridRoot) return;
+    const colId = columnIdAt(rowIndex, colIndex);
+    if (colId != null && hasEditorSlot(colId)) return;
     let attempts = 0;
     const tryFocus = () => {
       const cellEl = resolveCellEl(String(rowIndex), colIndex);
@@ -5581,6 +5621,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     setEditingRowIndex(rowIndex);
     setActiveInControl(true);
     setEditVer(editVer() + 1);
+    // Editor-owns-focus contract (quick 260711-i5m): the row's FIRST editable column is the
+    // initial focus target — editorAutofocusFor derives the reactive `autofocus` #editor scope
+    // prop from it (a built-in column is also host-focused below via focusEditorWhenReady; a
+    // drop-in column self-focuses via its own $onMount, gated off the host reach-in in Task 3).
+    setEditFocusColId(editable[0].colId);
     focusEditorWhenReady();
   }
 
@@ -5613,9 +5658,18 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
       const err = runValidator(ec.colId, coerceCellValue(ec.colId, draft[ec.colId]), rowOriginal);
       if (err !== true) {
         setInvalid(err);
+        // Editor-owns-focus contract (quick 260711-i5m): the OFFENDING column becomes the new
+        // reactive focus target BEFORE the host-focus call below — a #editor drop-in already
+        // mounted (full-row edit opens every editable cell at once) picks this up via its own
+        // lazy $watch on the `autofocus` scope prop flipping false→true. Bump editVer so the
+        // coarse-render targets (React/Vue/Angular/Svelte) re-derive the slot binding (Solid's
+        // fine-grained accessor re-runs without the bump, but the bump keeps all 6 in lockstep).
+        setEditFocusColId(ec.colId);
+        setEditVer(editVer() + 1);
         // B22: focus the OFFENDING column's editor (the one whose validator rejected), NOT
         // unconditionally the first editor (focusEditorWhenReady resolves the first
         // [data-editing-cell] in DOM order). ec.colIndex is the offending cell's visible col.
+        // Gated (Task 3) so a #editor drop-in self-focuses instead of a host DOM reach-in.
         focusRowEditorAt(rowIndex, ec.colIndex);
         return false;
       }
@@ -5894,6 +5948,11 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
     if (pos < 0) pos = 0;
     const len = cols.length;
     const nextPos = backward ? (pos - 1 + len) % len : (pos + 1) % len;
+    // Editor-owns-focus contract (quick 260711-i5m): the Tab target becomes the new reactive
+    // focus target BEFORE the host-focus call below, so Tab onto an already-mounted #editor
+    // drop-in (row mode) also refocuses it via its own lazy $watch.
+    setEditFocusColId(editable[nextPos].colId);
+    setEditVer(editVer() + 1);
     focusRowEditorAt(rowIndex, cols[nextPos]);
   }
 
@@ -6426,7 +6485,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor() })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: row().original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, rowIndexOf(row())) })}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(row())} aria-label={rozieAttr(rowIsExpanded(row()) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(row(), $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(row()) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">
@@ -6499,7 +6558,7 @@ export default function DataTable(_props: DataTableProps): JSX.Element {
               {<Show when={hasEditorSlot(cell().column.id)} fallback={<Show when={editorTypeOf(cell().column.id) === 'number'} fallback={<Show when={editorTypeOf(cell().column.id) === 'select'} fallback={<Show when={editorTypeOf(cell().column.id) === 'checkbox'} fallback={<input type="text" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" />}><input type="checkbox" data-editing-cell="" class={"rdt-cell-editor"} checked={editorCheckedFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorCheckbox(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><select data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onChange={($event: Event & { currentTarget: HTMLSelectElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLSelectElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="">
                 <Key each={editorOptionsOf(cell().column.id) as readonly any[]} by={(opt) => opt.value}>{(opt) => <option value={rozieAttr(opt().value)} data-rozie-s-d5dcab4c="">{rozieDisplay(opt().label)}</option>}</Key>
               </select></Show>}><input type="number" data-editing-cell="" class={"rdt-cell-editor"} value={editorValueFor(cell().column.id)} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onCellEditorInput(cell().column.id, $event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorKeyDown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onEditorBlur($event); }} data-rozie-s-d5dcab4c="" /></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
-                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor() })}
+                {(_props.editorSlot ?? _props.slots?.['editor'])?.({ columnId: cell().column.id, column: cell().column, row: wr().row.original, value: editorValueFor(cell().column.id), commit: editorCommitFor(cell().column.id), cancel: editorCancelFor(), autofocus: editorAutofocusFor(cell().column.id, wr().vi.index) })}
               </span></Show>}</span></Show>}><span style={{ display: "contents" }} data-rozie-s-d5dcab4c="">
               <button type="button" data-expander="" aria-expanded={!!rowIsExpanded(wr().row)} aria-label={rozieAttr(rowIsExpanded(wr().row) ? 'Collapse group' : 'Expand group')} class={"rdt-expander rdt-group-toggle"} onClick={($event: MouseEvent & { currentTarget: HTMLButtonElement; target: Element }) => { onToggleExpand(wr().row, $event); }} data-rozie-s-d5dcab4c="">{rozieDisplay(rowIsExpanded(wr().row) ? '▾' : '▸')}</button>
               <span class={"rdt-group-value"} data-rozie-s-d5dcab4c="">

package/src/EditorText.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from 'solid-js';
-import { createSignal, mergeProps, splitProps } from 'solid-js';
+import { createEffect, createSignal, mergeProps, on, onMount, splitProps, untrack } from 'solid-js';
 
 interface EditorTextProps {
   /**
@@ -26,13 +26,24 @@ interface EditorTextProps {
    * `() => void` — revert the edit and close the editor (from the `#editor` slot scope). Null-guarded at call sites.
    */
   cancel?: ((...args: unknown[]) => unknown) | null;
+  /**
+   * Focus this editor's primary input when true — the host sets it for the one editor that should hold focus; reactive.
+   */
+  autofocus?: boolean;
 }
 
 export default function EditorText(_props: EditorTextProps): JSX.Element {
-  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null }, _props);
-  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel']);
+  const _merged = mergeProps({ columnId: '', column: null, row: null, value: null, commit: null, cancel: null, autofocus: false }, _props);
+  const [local, attrs] = splitProps(_merged, ['columnId', 'column', 'row', 'value', 'commit', 'cancel', 'autofocus']);
 
   const [draft, setDraft] = createSignal('');
+  onMount(() => {
+    if (local.autofocus) inputElRef?.focus();
+  });
+  createEffect(on(() => (() => local.autofocus)(), (v) => untrack(() => ((v: any) => {
+    if (v) inputElRef?.focus();
+  })(v)), { defer: true }));
+  let inputElRef: HTMLElement | null = null;
 
   // Seed the draft once at setup from the incoming value (setup-once, NOT in the
   // template). Normalize null/undefined to '' so the input value binds to a string.
@@ -64,9 +75,15 @@ export default function EditorText(_props: EditorTextProps): JSX.Element {
     doCommit();
   }
 
+  // Editor-owns-focus contract: focus OUR OWN input when the host says we should hold focus.
+  // $onMount covers the initial open (autofocus already true on first render); the LAZY $watch
+  // (NOT { immediate: true } — an immediate watch fires PRE-mount, null ref on Lit/Solid) covers
+  // a REACTIVE refocus while already mounted (e.g. a row-mode validation failure that flips
+  // autofocus back onto this already-open drop-in).
+
   return (
     <>
-    <input type="text" data-editing-cell="" aria-label={local.columnId} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
+    <input type="text" data-editing-cell="" aria-label={local.columnId} ref={(el) => { inputElRef = el as HTMLElement; }} class={"rdt-cell-editor"} value={draft()} onInput={($event: InputEvent & { currentTarget: HTMLInputElement; target: Element }) => { onInput($event); }} onKeyDown={($event: KeyboardEvent & { currentTarget: HTMLInputElement; target: Element }) => { onKeydown($event); }} onBlur={($event: FocusEvent & { currentTarget: HTMLInputElement; target: Element }) => { onBlur(); }} data-rozie-s-0d17f43a="" />
     </>
   );
 }