fix(data-grid): tab management issue on re-renders

twilio-labs · Oct 17, 2023 · 4622646 · 4622646
1 parent ad75602
commit 4622646
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 3 deletions.
diff --git a/.changeset/silly-mirrors-smash.md b/.changeset/silly-mirrors-smash.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/data-grid": patch
+"@twilio-paste/core": patch
+---
+
+[Data Grid] Fix issue where form elements in the data-grid that immediately re-render on mount cause the tabIndex management system to faulter.
diff --git a/packages/paste-core/components/data-grid/__tests__/index.spec.tsx b/packages/paste-core/components/data-grid/__tests__/index.spec.tsx
@@ -12,6 +12,8 @@ import {
   SortableColumnsDataGrid,
 } from "../stories/index.stories";
 
+jest.useFakeTimers();
+
 const checkTagName = (el: Element, name: string): void => expect(el.tagName).toBe(name.toUpperCase());
 
 describe("Data Grid", () => {
@@ -177,6 +179,9 @@ describe("Data Grid", () => {
       if (firstInputCell == null) {
         throw new Error("cannot find firstInputCell");
       }
+      act(() => {
+        jest.advanceTimersByTime(300);
+      });
 
       // Focus the button before the DataGrid
       beforeDataGridButton.focus();
@@ -231,6 +236,7 @@ describe("Data Grid", () => {
 
       // I added this particular sequence because it was a reproducable bug in my manual tests
       act(() => {
+        jest.advanceTimersByTime(300);
         firstThCell.focus();
       });
       expect(firstThCell).toHaveFocus();
@@ -243,6 +249,9 @@ describe("Data Grid", () => {
       userEvent.tab();
       userEvent.tab();
       userEvent.keyboard("{enter}");
+      act(() => {
+        jest.advanceTimersByTime(300);
+      });
       // Bring the focus back to the DataGrid
       userEvent.tab({ shift: true });
       userEvent.tab({ shift: true });

diff --git a/packages/paste-core/components/data-grid/src/DataGridCell.tsx b/packages/paste-core/components/data-grid/src/DataGridCell.tsx
@@ -101,9 +101,12 @@ export const DataGridCell: React.FC<React.PropsWithChildren<DataGridCellProps>>
    * When actionable mode changes, toggle the tabindex of the cell and children
    */
   React.useEffect(() => {
-    if (cellRef.current) {
-      updateTabIndexForActionable(cellRef.current, dataGridState.actionable);
-    }
+    setTimeout(() => {
+      if (cellRef.current) {
+        // This delay solves issues around components that re-render immediately on mount, like the Select componenent
+        updateTabIndexForActionable(cellRef.current, dataGridState.actionable);
+      }
+    }, 10);
   }, [dataGridState.actionable]);
 
   return (