fix: activate New row button via keyboard (Enter/Space)

The New row control is a role=button div with no keydown handler, so Enter/Space never triggered it. It also lives inside the grid element, whose native keydown listener caught the Enter and ran cell navigation against the previously focused cell.

Add Enter/Space activation to the button, and make the grid keyboard handler ignore keydowns that originate from a focusable child rather than the grid element itself, so in-grid controls handle their own keys.
This commit is contained in:
Philipinho
2026-06-16 10:49:53 +01:00
parent dc63ed8dee
commit 770c9b9d98
2 changed files with 9 additions and 0 deletions
@@ -16,6 +16,12 @@ export const AddRowButton = memo(function AddRowButton({
<div <div
className={classes.addRowButton} className={classes.addRowButton}
onClick={onClick} onClick={onClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClick?.();
}
}}
role="button" role="button"
tabIndex={0} tabIndex={0}
> >
@@ -166,6 +166,8 @@ export function useGridKeyboardNav({
return; return;
} }
if (e.target !== containerRef.current) return;
if (isTextEntry(document.activeElement)) return; if (isTextEntry(document.activeElement)) return;
if (e.key === "Escape") { if (e.key === "Escape") {
@@ -263,6 +265,7 @@ export function useGridKeyboardNav({
} }
}, },
[ [
containerRef,
editingCell, editingCell,
focusedCell, focusedCell,
getRowIds, getRowIds,