From 70754f10d4119a999ac9a46b6ea8c11a12a1a72d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 23 Sep 2019 16:39:43 +0200
Subject: [PATCH] [react-interaction] Tweak Focus Table component (#16862)

---
 .../accessibility/src/FocusTable.js           | 36 ++++++++++---------
 packages/react-reconciler/src/ReactFiber.js   |  1 +
 2 files changed, 21 insertions(+), 16 deletions(-)

diff --git a/packages/react-interactions/accessibility/src/FocusTable.js b/packages/react-interactions/accessibility/src/FocusTable.js
index 98d736a0e4ad7..64042bbbec1c5 100644
--- a/packages/react-interactions/accessibility/src/FocusTable.js
+++ b/packages/react-interactions/accessibility/src/FocusTable.js
@@ -62,10 +62,10 @@ function focusCell(cell: ReactScopeMethods): void {
   }
 }
 
-function focusCellByRowIndex(row: ReactScopeMethods, rowIndex: number): void {
+function focusCellByIndex(row: ReactScopeMethods, cellIndex: number): void {
   const cells = row.getChildren();
   if (cells !== null) {
-    const cell = cells[rowIndex];
+    const cell = cells[cellIndex];
     if (cell) {
       focusCell(cell);
     }
@@ -150,14 +150,15 @@ export function createFocusTable(): Array<React.Component> {
         const currentCell = scopeRef.current;
         switch (event.key) {
           case 'ArrowUp': {
-            const [cells, rowIndex] = getRowCells(currentCell);
+            const [cells, cellIndex] = getRowCells(currentCell);
             if (cells !== null) {
-              const [columns, columnIndex] = getRows(currentCell);
-              if (columns !== null) {
-                if (columnIndex > 0) {
-                  const column = columns[columnIndex - 1];
-                  focusCellByRowIndex(column, rowIndex);
-                } else if (columnIndex === 0) {
+              const [rows, rowIndex] = getRows(currentCell);
+              if (rows !== null) {
+                if (rowIndex > 0) {
+                  const row = rows[rowIndex - 1];
+                  focusCellByIndex(row, cellIndex);
+                  event.preventDefault();
+                } else if (rowIndex === 0) {
                   triggerNavigateOut(currentCell, 'up');
                 }
               }
@@ -165,16 +166,17 @@ export function createFocusTable(): Array<React.Component> {
             return;
           }
           case 'ArrowDown': {
-            const [cells, rowIndex] = getRowCells(currentCell);
+            const [cells, cellIndex] = getRowCells(currentCell);
             if (cells !== null) {
-              const [columns, columnIndex] = getRows(currentCell);
-              if (columns !== null) {
-                if (columnIndex !== -1) {
-                  if (columnIndex === columns.length - 1) {
+              const [rows, rowIndex] = getRows(currentCell);
+              if (rows !== null) {
+                if (rowIndex !== -1) {
+                  if (rowIndex === rows.length - 1) {
                     triggerNavigateOut(currentCell, 'down');
                   } else {
-                    const column = columns[columnIndex + 1];
-                    focusCellByRowIndex(column, rowIndex);
+                    const row = rows[rowIndex + 1];
+                    focusCellByIndex(row, cellIndex);
+                    event.preventDefault();
                   }
                 }
               }
@@ -186,6 +188,7 @@ export function createFocusTable(): Array<React.Component> {
             if (cells !== null) {
               if (rowIndex > 0) {
                 focusCell(cells[rowIndex - 1]);
+                event.preventDefault();
               } else if (rowIndex === 0) {
                 triggerNavigateOut(currentCell, 'left');
               }
@@ -200,6 +203,7 @@ export function createFocusTable(): Array<React.Component> {
                   triggerNavigateOut(currentCell, 'right');
                 } else {
                   focusCell(cells[rowIndex + 1]);
+                  event.preventDefault();
                 }
               }
             }
diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js
index 1b9feda2625e8..e19c80f2efba4 100644
--- a/packages/react-reconciler/src/ReactFiber.js
+++ b/packages/react-reconciler/src/ReactFiber.js
@@ -789,6 +789,7 @@ function createFiberFromScope(
 ) {
   const fiber = createFiber(ScopeComponent, pendingProps, key, mode);
   fiber.type = scope;
+  fiber.elementType = scope;
   fiber.expirationTime = expirationTime;
   return fiber;
 }