[react-interactions] FocusTable key press bound propgataion (#16895)

Author: trueadm

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<React.Component> {
@@ -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);
                 }
               }
             }
@@ -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);
@@ -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;
@@ -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();

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 (
+          <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');
+    });
   });
 });