{"parents":["fa1a3262271be165820fa51daeb036ba260205a3"],"files":[{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/FocusTable.js"},{"status":"M","path":"packages\/react-interactions\/accessibility\/src\/__tests__\/FocusTable-test.internal.js"}],"patch":"diff --git a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\nindex d79451daeb..a62d06bb3a 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/FocusTable.js\n@@ -101,6 +101,7 @@ function getRows(currentCell: ReactScopeMethods) {\n function triggerNavigateOut(\n currentCell: ReactScopeMethods,\n direction: 'left' | 'right' | 'up' | 'down',\n+ event,\n ): void {\n const row = currentCell.getParent();\n if (row !== null && row.getProps().type === 'row') {\n@@ -122,9 +123,11 @@ function triggerNavigateOut(\n }\n };\n onKeyboardOut(direction, focusTableByID);\n+ return;\n }\n }\n }\n+ event.continuePropagation();\n }\n \n export function createFocusTable(scope: ReactScope): Array {\n@@ -162,7 +165,7 @@ export function createFocusTable(scope: ReactScope): Array {\n focusCellByIndex(row, cellIndex);\n event.preventDefault();\n } else if (rowIndex === 0) {\n- triggerNavigateOut(currentCell, 'up');\n+ triggerNavigateOut(currentCell, 'up', event);\n }\n }\n }\n@@ -175,7 +178,7 @@ export function createFocusTable(scope: ReactScope): Array {\n if (rows !== null) {\n if (rowIndex !== -1) {\n if (rowIndex === rows.length - 1) {\n- triggerNavigateOut(currentCell, 'down');\n+ triggerNavigateOut(currentCell, 'down', event);\n } else {\n const row = rows[rowIndex + 1];\n focusCellByIndex(row, cellIndex);\n@@ -193,7 +196,7 @@ export function createFocusTable(scope: ReactScope): Array {\n focusCell(cells[rowIndex - 1]);\n event.preventDefault();\n } else if (rowIndex === 0) {\n- triggerNavigateOut(currentCell, 'left');\n+ triggerNavigateOut(currentCell, 'left', event);\n }\n }\n return;\n@@ -203,7 +206,7 @@ export function createFocusTable(scope: ReactScope): Array {\n if (cells !== null) {\n if (rowIndex !== -1) {\n if (rowIndex === cells.length - 1) {\n- triggerNavigateOut(currentCell, 'right');\n+ triggerNavigateOut(currentCell, 'right', event);\n } else {\n focusCell(cells[rowIndex + 1]);\n event.preventDefault();\ndiff --git a\/packages\/react-interactions\/accessibility\/src\/__tests__\/FocusTable-test.internal.js b\/packages\/react-interactions\/accessibility\/src\/__tests__\/FocusTable-test.internal.js\nindex ea3e463ef4..c88b5b83b0 100644\n--- a\/packages\/react-interactions\/accessibility\/src\/__tests__\/FocusTable-test.internal.js\n+++ b\/packages\/react-interactions\/accessibility\/src\/__tests__\/FocusTable-test.internal.js\n@@ -257,5 +257,74 @@ describe('FocusTable', () => {\n });\n expect(document.activeElement.textContent).toBe('A3');\n });\n+\n+ it('handles nested tables correctly', () => {\n+ const CustomScope = React.unstable_createScope((type, props) => {\n+ return type === 'input';\n+ });\n+ const [FocusTable, FocusRow, FocusCell] = createFocusTable(CustomScope);\n+ const firstRef = React.createRef();\n+\n+ function Test() {\n+ return (\n+ \n+

\n+ \n+ \n+ \n+ \n+ \n+ \n+ <\/FocusCell>\n+ \n+ \n+ <\/FocusCell>\n+ <\/FocusRow>\n+ <\/FocusTable>\n+ <\/FocusCell>\n+ \n+ \n+ <\/FocusCell>\n+ \n+ \n+ <\/FocusCell>\n+ <\/FocusRow>\n+ <\/div>\n+

\n+ \n+ \n+ \n+ <\/FocusCell>\n+ \n+ \n+ <\/FocusCell>\n+ \n+ \n+ <\/FocusCell>\n+ <\/FocusRow>\n+ <\/div>\n+ <\/FocusTable>\n+ );\n+ }\n+\n+ ReactDOM.render(, container);\n+ firstRef.current.focus();\n+\n+ const nestedA1 = createEventTarget(document.activeElement);\n+ nestedA1.keydown({\n+ key: 'ArrowRight',\n+ });\n+ expect(document.activeElement.placeholder).toBe('Nested B1');\n+\n+ const nestedB1 = createEventTarget(document.activeElement);\n+ nestedB1.keydown({\n+ key: 'ArrowRight',\n+ });\n+ expect(document.activeElement.placeholder).toBe('B1');\n+ });\n });\n });\n","commit":{"shortRevision":"4bb0e96b4b","authoredAt":"2019-09-25T21:12:39+02:00","subject":"[react-interactions] FocusTable key press bound propgataion (#16895)","authorName":"Dominic Gannaway","authorEmail":"trueadm@users.noreply.github.com","revision":"4bb0e96b4b0dd5db4bb349cd27425e5594970eb3"},"body":""}

dillon1000/react

Files changed