Skip to content

Commit

Permalink
[react-interactions] FocusTable key press bound propgataion (#16895)
Browse files Browse the repository at this point in the history
  • Loading branch information
trueadm authored Sep 25, 2019
1 parent fa1a326 commit 4bb0e96
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 4 deletions.
11 changes: 7 additions & 4 deletions packages/react-interactions/accessibility/src/FocusTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand All @@ -122,9 +123,11 @@ function triggerNavigateOut(
}
};
onKeyboardOut(direction, focusTableByID);
return;
}
}
}
event.continuePropagation();
}

export function createFocusTable(scope: ReactScope): Array<React.Component> {
Expand Down Expand Up @@ -162,7 +165,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
focusCellByIndex(row, cellIndex);
event.preventDefault();
} else if (rowIndex === 0) {
triggerNavigateOut(currentCell, 'up');
triggerNavigateOut(currentCell, 'up', event);
}
}
}
Expand All @@ -175,7 +178,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
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);
Expand All @@ -193,7 +196,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
focusCell(cells[rowIndex - 1]);
event.preventDefault();
} else if (rowIndex === 0) {
triggerNavigateOut(currentCell, 'left');
triggerNavigateOut(currentCell, 'left', event);
}
}
return;
Expand All @@ -203,7 +206,7 @@ export function createFocusTable(scope: ReactScope): Array<React.Component> {
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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<FocusTable>
<div>
<FocusRow>
<FocusCell>
<FocusTable>
<FocusRow>
<FocusCell>
<input
placeholder="Nested A1"
tabIndex={0}
ref={firstRef}
/>
</FocusCell>
<FocusCell>
<input placeholder="Nested B1" tabIndex={0} />
</FocusCell>
</FocusRow>
</FocusTable>
</FocusCell>
<FocusCell>
<input placeholder="B1" tabIndex={-1} />
</FocusCell>
<FocusCell>
<input placeholder="C1" tabIndex={-1} />
</FocusCell>
</FocusRow>
</div>
<div>
<FocusRow>
<FocusCell>
<input placeholder="A2" tabIndex={-1} />
</FocusCell>
<FocusCell>
<input placeholder="B2" tabIndex={-1} />
</FocusCell>
<FocusCell>
<input placeholder="C1" tabIndex={-1} />
</FocusCell>
</FocusRow>
</div>
</FocusTable>
);
}

ReactDOM.render(<Test />, 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');
});
});
});

0 comments on commit 4bb0e96

Please sign in to comment.