[DataGrid] Fix column reorder instability

packages/grid/_modules_/grid/hooks/features/columns/useColumns.ts

@@ -11,7 +11,9 @@ import {
   InternalColumns,
 } from '../../../models/colDef/colDef';
 import { ColumnTypesRecord } from '../../../models/colDef/colTypeDef';
+import { getDefaultColumnTypes } from '../../../models/colDef/defaultColumnTypes';
 import { getColDef } from '../../../models/colDef/getColDef';
+import { mergeColTypes } from '../../../utils/mergeUtils';
 import { useApiMethod } from '../../root/useApiMethod';
 import { optionsSelector } from '../../utils/optionsSelector';
 import { Logger, useLogger } from '../../utils/useLogger';
@@ -56,8 +58,8 @@ function hydrateColumns(
   logger: Logger,
 ): Columns {
   logger.debug('Hydrating Columns with default definitions');
-
-  const extendedColumns = columns.map((c) => ({ ...getColDef(columnTypes, c.type), ...c }));
+  const mergedColTypes = mergeColTypes(getDefaultColumnTypes(), columnTypes);
+  const extendedColumns = columns.map((c) => ({ ...getColDef(mergedColTypes, c.type), ...c }));
 
   if (withCheckboxSelection) {
     return [checkboxSelectionColDef, ...extendedColumns];

packages/grid/_modules_/grid/hooks/utils/useOptionsProp.ts

@@ -3,7 +3,7 @@ import { DEFAULT_LOCALE_TEXT } from '../../constants/localeTextConstants';
 import { GridComponentProps, GridOptionsProp } from '../../GridComponentProps';
 import { ApiRef } from '../../models/api/apiRef';
 import { DEFAULT_GRID_OPTIONS, GridOptions } from '../../models/gridOptions';
-import { mergeOptions } from '../../utils/mergeOptions';
+import { mergeOptions } from '../../utils/mergeUtils';
 import { useGridReducer } from '../features/core/useGridReducer';
 
 // REDUCER

packages/grid/_modules_/grid/utils/index.ts

@@ -3,5 +3,5 @@ export * from './sortingUtils';
 export * from './domUtils';
 export * from './classnames';
 export * from './keyboardUtils';
-export * from './mergeOptions';
+export * from './mergeUtils';
 export * from './paramsUtils';

packages/grid/_modules_/grid/utils/mergeOptions.ts → packages/grid/_modules_/grid/utils/mergeUtils.ts

@@ -33,11 +33,9 @@ export function removeUndefinedProps(options: Object) {
 // We intentionally set the types to any to avoid circular deps
 export function mergeOptions(defaultOptions: any, options?: any) {
   options = removeUndefinedProps(options);
-  const mergedColTypes = mergeColTypes(defaultOptions.columnTypes, options?.columnTypes);
   const mergedOptions = {
     ...defaultOptions,
     ...options,
   };
-  mergedOptions.columnTypes = mergedColTypes;
   return mergedOptions;
 }

packages/grid/x-grid/src/tests/reorder.XGrid.test.tsx

@@ -58,4 +58,26 @@ describe('<XGrid /> - Reorder', () => {
       expect(getColumnHeaders()).to.deep.equal(['brand', 'id']);
     });
   });
+  it('should not reset the column order when a prop change', () => {
+    let apiRef: ApiRef;
+    const rows = [{ id: 0, brand: 'Nike' }];
+    const columns = [{ field: 'brand' }, { field: 'desc' }, { field: 'type' }];
+
+    const Test = () => {
+      apiRef = useApiRef();
+
+      return (
+        <div style={{ width: 300, height: 300 }}>
+          <XGrid apiRef={apiRef} rows={rows} columns={columns} onPageChange={() => {}} />
+        </div>
+      );
+    };
+
+    const { forceUpdate } = render(<Test />);
+    expect(getColumnHeaders()).to.deep.equal(['brand', 'desc', 'type']);
+    apiRef!.current.moveColumn('brand', 2);
+    expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']);
+    forceUpdate(); // test stability
+    expect(getColumnHeaders()).to.deep.equal(['desc', 'type', 'brand']);
+  });
 });

packages/storybook/src/stories/grid-selection.stories.tsx

@@ -1,3 +1,4 @@
+import { useDemoData } from '@material-ui/x-grid-data-generator';
 import * as React from 'react';
 import { action } from '@storybook/addon-actions';
 import { XGrid, GridOptionsProp, useApiRef } from '@material-ui/x-grid';
@@ -63,3 +64,17 @@ export const MultipleSelectWithCheckboxNoClick = () => {
     <XGrid rows={data.rows} columns={data.columns} checkboxSelection disableSelectionOnClick />
   );
 };
+
+export function HandleSelection() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 100,
+  });
+
+  const [myState, setMyState] = React.useState(false);
+  const handleSelection = React.useCallback(() => {
+    setMyState(!myState);
+  }, [myState]);
+
+  return <XGrid {...data} checkboxSelection onSelectionChange={handleSelection} />;
+}