fix(base): commit cell edit on click-outside, not just on Enter

CellNumber/CellText/CellEmail/CellUrl all commit their draft via
onBlur. The grid-container's document mousedown handler was clearing
editingCell synchronously when the user clicked outside, which made
React unmount the input before the native blur event reached its
onBlur listener — so the edit was silently dropped, and pressing
Enter was the only way to save.

Trigger blur() on the active element first; the cell's onBlur runs,
commits, and clears editingCell as part of its normal flow. The
trailing setEditingCell(null) is now a safety net for the case
where the active element wasn't a cell editor (no double-commit
risk because each cell guards with committedRef).
This commit is contained in:
Philipinho
2026-04-28 15:44:22 +01:00
parent 7e35936544
commit 0532253034
@@ -121,6 +121,19 @@ export function GridContainer({
} else {
setActivePropertyMenu(null);
}
// Blur the focused element BEFORE clearing editingCell. Cell
// editors (CellNumber, CellText, CellEmail, CellUrl) commit
// their draft via onBlur — if we set editingCell to null first,
// React unmounts the input before the native blur event reaches
// its onBlur listener, so the user's edit is silently dropped
// (and pressing Enter is the only way to save). Triggering blur
// here lets the cell's onBlur run, commit, and clear editingCell
// itself; the setEditingCell(null) below is a no-op safety net
// for cases where the active element wasn't a cell editor.
const active = document.activeElement as HTMLElement | null;
if (active && active !== document.body && typeof active.blur === "function") {
active.blur();
}
setEditingCell(null);
};
document.addEventListener("mousedown", handleMouseDown);