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
className={classes.addRowButton}
onClick={onClick}
onKeyDown={(e) => {
if (e.key === "Enter" || e.key === " ") {
e.preventDefault();
onClick?.();
}
}}
role="button"
tabIndex={0}
>
@@ -166,6 +166,8 @@ export function useGridKeyboardNav({
return;
}
if (e.target !== containerRef.current) return;
if (isTextEntry(document.activeElement)) return;
if (e.key === "Escape") {
@@ -263,6 +265,7 @@ export function useGridKeyboardNav({
}
},
[
containerRef,
editingCell,
focusedCell,
getRowIds,