[react-interaction] Tweak Focus Table component (#16862)
Dominic Gannaway committed
Sep 23, 2019 at 16:39 UTC
70754f10d4119a999ac9a46b6ea8c11a12a1a72d
2 files changed
+21
-16
packages/react-interactions/accessibility/src/FocusTable.js
+20
-16
@@ -62,10 +62,10 @@ function focusCell(cell: ReactScopeMethods): void {
62
}
63
}
64
65
-function focusCellByRowIndex(row: ReactScopeMethods, rowIndex: number): void {
65
+function focusCellByIndex(row: ReactScopeMethods, cellIndex: number): void {
66
const cells = row.getChildren();
67
if (cells !== null) {
68
- const cell = cells[rowIndex];
68
+ const cell = cells[cellIndex];
69
if (cell) {
70
focusCell(cell);
71
}
@@ -150,14 +150,15 @@ export function createFocusTable(): Array<React.Component> {
150
const currentCell = scopeRef.current;
151
switch (event.key) {
152
case 'ArrowUp': {
153
- const [cells, rowIndex] = getRowCells(currentCell);
153
+ const [cells, cellIndex] = getRowCells(currentCell);
154
if (cells !== null) {
155
- const [columns, columnIndex] = getRows(currentCell);
156
- if (columns !== null) {
157
- if (columnIndex > 0) {
158
- const column = columns[columnIndex - 1];
159
- focusCellByRowIndex(column, rowIndex);
160
- } else if (columnIndex === 0) {
155
+ const [rows, rowIndex] = getRows(currentCell);
156
+ if (rows !== null) {
157
+ if (rowIndex > 0) {
158
+ const row = rows[rowIndex - 1];
159
+ focusCellByIndex(row, cellIndex);
160
+ event.preventDefault();
161
+ } else if (rowIndex === 0) {
162
triggerNavigateOut(currentCell, 'up');
163
}
164
}
@@ -165,16 +166,17 @@ export function createFocusTable(): Array<React.Component> {
166
return;
167
}
168
case 'ArrowDown': {
168
- const [cells, rowIndex] = getRowCells(currentCell);
169
+ const [cells, cellIndex] = getRowCells(currentCell);
170
if (cells !== null) {
170
- const [columns, columnIndex] = getRows(currentCell);
171
- if (columns !== null) {
172
- if (columnIndex !== -1) {
173
- if (columnIndex === columns.length - 1) {
171
+ const [rows, rowIndex] = getRows(currentCell);
172
+ if (rows !== null) {
173
+ if (rowIndex !== -1) {
174
+ if (rowIndex === rows.length - 1) {
175
triggerNavigateOut(currentCell, 'down');
176
} else {
176
- const column = columns[columnIndex + 1];
177
- focusCellByRowIndex(column, rowIndex);
177
+ const row = rows[rowIndex + 1];
178
+ focusCellByIndex(row, cellIndex);
179
+ event.preventDefault();
180
}
181
}
182
}
@@ -186,6 +188,7 @@ export function createFocusTable(): Array<React.Component> {
188
if (cells !== null) {
189
if (rowIndex > 0) {
190
focusCell(cells[rowIndex - 1]);
191
+ event.preventDefault();
192
} else if (rowIndex === 0) {
193
triggerNavigateOut(currentCell, 'left');
194
}
@@ -200,6 +203,7 @@ export function createFocusTable(): Array<React.Component> {
203
triggerNavigateOut(currentCell, 'right');
204
} else {
205
focusCell(cells[rowIndex + 1]);
206
+ event.preventDefault();
207
}
208
}
209
}
packages/react-reconciler/src/ReactFiber.js
+1
@@ -789,6 +789,7 @@ function createFiberFromScope(
789
) {
790
const fiber = createFiber(ScopeComponent, pendingProps, key, mode);
791
fiber.type = scope;
792
+ fiber.elementType = scope;
793
fiber.expirationTime = expirationTime;
794
return fiber;
795
}