Add editorOptions.closeOnExternalRowChange prop (Comcast#3759)

Add `editorOptions.closeOnExternalRowChange` prop

Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com>

Author: amanmahajan7

src/DataGrid.tsx

@@ -904,6 +904,7 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
     const { idx, row } = selectedPosition;
     const column = columns[idx];
     const colSpan = getColSpan(column, lastFrozenColumnIndex, { type: 'ROW', row });
+    const closeOnExternalRowChange = column.editorOptions?.closeOnExternalRowChange ?? true;
 
     const closeEditor = (shouldFocusCell: boolean) => {
       setShouldFocusCell(shouldFocusCell);
@@ -925,7 +926,10 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
       }
     };
 
-    if (rows[selectedPosition.rowIdx] !== selectedPosition.originalRow) {
+    if (
+      closeOnExternalRowChange &&
+      rows[selectedPosition.rowIdx] !== selectedPosition.originalRow
+    ) {
       // Discard changes if rows are updated from outside
       closeEditor(false);
     }

src/EditCell.tsx

@@ -57,7 +57,7 @@ export default function EditCell<R, SR>({
   navigate
 }: EditCellProps<R, SR>) {
   const frameRequestRef = useRef<number>(undefined);
-  const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick !== false;
+  const commitOnOutsideClick = column.editorOptions?.commitOnOutsideClick ?? true;
 
   // We need to prevent the `useEffect` from cleaning up between re-renders,
   // as `onWindowCaptureMouseDown` might otherwise miss valid mousedown events.

src/types.ts

@@ -63,6 +63,8 @@ export interface Column<TRow, TSummaryRow = unknown> {
     readonly displayCellContent?: Maybe<boolean>;
     /** @default true */
     readonly commitOnOutsideClick?: Maybe<boolean>;
+    /** @default true */
+    readonly closeOnExternalRowChange?: Maybe<boolean>;
   }>;
 }
 

test/browser/column/renderEditCell.test.tsx

@@ -217,6 +217,38 @@ describe('Editor', () => {
       await userEvent.keyboard('a{arrowleft}b{arrowright}c{arrowdown}'); // should commit changes on arrowdown
       expect(getCellsAtRowIndex(0)[1]).toHaveTextContent(/^a1bac$/);
     });
+
+    it('should close the editor when closeOnExternalRowChange is true or undefined and row is changed from outside', async () => {
+      page.render(
+        <EditorTest
+          editorOptions={{
+            // needed to prevent editor from closing on update button click
+            commitOnOutsideClick: false
+          }}
+        />
+      );
+      await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
+      const editor = page.getByRole('textbox', { name: 'col2-editor' });
+      await expect.element(editor).toBeInTheDocument();
+      await userEvent.click(page.getByRole('button', { name: 'update' }));
+      await expect.element(editor).not.toBeInTheDocument();
+    });
+
+    it('should not close the editor when closeOnExternalRowChange is false and row is changed from outside', async () => {
+      page.render(
+        <EditorTest
+          editorOptions={{
+            commitOnOutsideClick: false,
+            closeOnExternalRowChange: false
+          }}
+        />
+      );
+      await userEvent.dblClick(getCellsAtRowIndex(0)[1]);
+      const editor = page.getByRole('textbox', { name: 'col2-editor' });
+      await expect.element(editor).toBeInTheDocument();
+      await userEvent.click(page.getByRole('button', { name: 'update' }));
+      await expect.element(editor).toBeInTheDocument();
+    });
   });
 
   describe('editor focus', () => {
@@ -376,6 +408,14 @@ function EditorTest({
       <button type="button" onClick={() => onSave?.(rows)}>
         save
       </button>
+      <button
+        type="button"
+        onClick={() => {
+          setRows((rows) => rows.map((row) => ({ ...row })));
+        }}
+      >
+        update
+      </button>
       <DataGrid
         columns={columns}
         rows={rows}