Add editorOptions.closeOnExternalRowChange prop (adazzle#3759)

amanmahajan7 · nstepien · web-flow · commit de086c9cd31c · 2025-04-16T08:48:44.000-05:00
Add `editorOptions.closeOnExternalRowChange` prop

Co-authored-by: Nicolas Stepien &lt;567105+nstepien@users.noreply.github.com&gt;
diff --git a/src/DataGrid.tsx b/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);
     }
diff --git a/src/EditCell.tsx b/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.
diff --git a/src/types.ts b/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>;
   }>;
 }
 
diff --git a/test/browser/column/renderEditCell.test.tsx b/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}

Original file line number	Diff line number	Diff line change
`@@ -63,6 +63,8 @@ export interface Column<TRow, TSummaryRow = unknown> {`
`63`	`63`	`readonly displayCellContent?: Maybe<boolean>;`
`64`	`64`	`/** @default true */`
`65`	`65`	`readonly commitOnOutsideClick?: Maybe<boolean>;`
	`66`	`+ /** @default true */`
	`67`	`+ readonly closeOnExternalRowChange?: Maybe<boolean>;`
`66`	`68`	`}>;`
`67`	`69`	`}`
`68`	`70`