diff --git a/packages/react-interactions/accessibility/src/FocusTable.js b/packages/react-interactions/accessibility/src/FocusTable.js index d79451daebb36..a62d06bb3a9ea 100644 --- a/packages/react-interactions/accessibility/src/FocusTable.js +++ b/packages/react-interactions/accessibility/src/FocusTable.js @@ -101,6 +101,7 @@ function getRows(currentCell: ReactScopeMethods) { function triggerNavigateOut( currentCell: ReactScopeMethods, direction: 'left' | 'right' | 'up' | 'down', + event, ): void { const row = currentCell.getParent(); if (row !== null && row.getProps().type === 'row') { @@ -122,9 +123,11 @@ function triggerNavigateOut( } }; onKeyboardOut(direction, focusTableByID); + return; } } } + event.continuePropagation(); } export function createFocusTable(scope: ReactScope): Array { @@ -162,7 +165,7 @@ export function createFocusTable(scope: ReactScope): Array { focusCellByIndex(row, cellIndex); event.preventDefault(); } else if (rowIndex === 0) { - triggerNavigateOut(currentCell, 'up'); + triggerNavigateOut(currentCell, 'up', event); } } } @@ -175,7 +178,7 @@ export function createFocusTable(scope: ReactScope): Array { if (rows !== null) { if (rowIndex !== -1) { if (rowIndex === rows.length - 1) { - triggerNavigateOut(currentCell, 'down'); + triggerNavigateOut(currentCell, 'down', event); } else { const row = rows[rowIndex + 1]; focusCellByIndex(row, cellIndex); @@ -193,7 +196,7 @@ export function createFocusTable(scope: ReactScope): Array { focusCell(cells[rowIndex - 1]); event.preventDefault(); } else if (rowIndex === 0) { - triggerNavigateOut(currentCell, 'left'); + triggerNavigateOut(currentCell, 'left', event); } } return; @@ -203,7 +206,7 @@ export function createFocusTable(scope: ReactScope): Array { if (cells !== null) { if (rowIndex !== -1) { if (rowIndex === cells.length - 1) { - triggerNavigateOut(currentCell, 'right'); + triggerNavigateOut(currentCell, 'right', event); } else { focusCell(cells[rowIndex + 1]); event.preventDefault(); diff --git a/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js b/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js index ea3e463ef451b..c88b5b83b076a 100644 --- a/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js +++ b/packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js @@ -257,5 +257,74 @@ describe('FocusTable', () => { }); expect(document.activeElement.textContent).toBe('A3'); }); + + it('handles nested tables correctly', () => { + const CustomScope = React.unstable_createScope((type, props) => { + return type === 'input'; + }); + const [FocusTable, FocusRow, FocusCell] = createFocusTable(CustomScope); + const firstRef = React.createRef(); + + function Test() { + return ( + +
+ + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + +
+
+ ); + } + + ReactDOM.render(, container); + firstRef.current.focus(); + + const nestedA1 = createEventTarget(document.activeElement); + nestedA1.keydown({ + key: 'ArrowRight', + }); + expect(document.activeElement.placeholder).toBe('Nested B1'); + + const nestedB1 = createEventTarget(document.activeElement); + nestedB1.keydown({ + key: 'ArrowRight', + }); + expect(document.activeElement.placeholder).toBe('B1'); + }); }); });