[data grid] Grid doesn't scroll horizontally during column reorder

[cherniavskii]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Grid doesn't scroll horizontally when trying to reorder the column outside of currently visible columns:

Screen.Recording.2022-09-21.at.14.27.17.mov

Expected behavior 🤔

Grid scrolls horizontally when trying to reorder the column outside of currently visible columns:

Steps to reproduce 🕹

Link to live example:

Steps:

1. Go to https://codesandbox.io/s/focused-bash-5089yf?file=/demo.tsx
2. Start dragging a column to the right
3. See that grid doesn't scroll horizontally preventing from moving a column outside of currently visible columns

Context 🔦

Column reorder feature is only available in Pro and Premium plans.

There's GridScrollArea component that is supposed to handle the scroll

mui-x/packages/grid/x-data-grid/src/components/GridScrollArea.tsx

Line 59 in 654866b

function GridScrollAreaRaw(props: ScrollAreaProps) {

But it's only used in DataGrid component:

mui-x/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx

Lines 22 to 27 in 654866b

	<GridScrollArea scrollDirection="left" />
	<GridColumnHeadersInner isDragging={isDragging} {...getInnerProps()}>
	{getColumnGroupHeaders()}
	{getColumnHeaders()}
	</GridColumnHeadersInner>
	<GridScrollArea scrollDirection="right" />

Instead of being used in DataGridPro and DataGridPremium components:

mui-x/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx

Lines 186 to 197 in 654866b

	<GridColumnHeadersInner isDragging={isDragging} {...innerProps}>
	{getColumnGroupHeaders({
	renderContext,
	minFirstColumn: leftPinnedColumns.length,
	maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length,
	})}
	{getColumnHeaders({
	renderContext,
	minFirstColumn: leftPinnedColumns.length,
	maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length,
	})}
	</GridColumnHeadersInner>

The diff below should do the job:

diff --git a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx b/packages/gr
id/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
index 6112388a96..153a7f02a8 100644
--- a/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
+++ b/packages/grid/x-data-grid-pro/src/components/DataGridProColumnHeaders.tsx
@@ -9,6 +9,7 @@ import {
   useGridApiEventHandler,
   gridVisibleColumnFieldsSelector,
   GridColumnHeaderSeparatorSides,
+  GridScrollArea,
 } from '@mui/x-data-grid';
 import {
   GridColumnHeaders,
@@ -183,6 +184,7 @@ export const DataGridProColumnHeaders = React.forwardRef<
           )}
         </GridColumnHeadersPinnedColumnHeaders>
       )}
+      <GridScrollArea scrollDirection="left" />
       <GridColumnHeadersInner isDragging={isDragging} {...innerProps}>
         {getColumnGroupHeaders({
           renderContext,
@@ -195,6 +197,7 @@ export const DataGridProColumnHeaders = React.forwardRef<
           maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length,
         })}
       </GridColumnHeadersInner>
+      <GridScrollArea scrollDirection="right" />
       {rightRenderContext && (
         <GridColumnHeadersPinnedColumnHeaders
           ownerState={{ side: GridPinnedPosition.right }}
diff --git a/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx b/packages/grid/x-da
ta-grid/src/components/DataGridColumnHeaders.tsx
index 0888cb7a3d..d2bd89b318 100644
--- a/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx
+++ b/packages/grid/x-data-grid/src/components/DataGridColumnHeaders.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
-import { GridScrollArea } from './GridScrollArea';
 import { GridColumnHeaders } from './columnHeaders/GridColumnHeaders';
 import { GridColumnHeadersInner } from './columnHeaders/GridColumnHeadersInner';
 
@@ -19,12 +18,10 @@ export const DataGridColumnHeaders = React.forwardRef<HTMLDivElement, DataGridCo
 
     return (
       <GridColumnHeaders ref={ref} {...getRootProps(other)}>
-        <GridScrollArea scrollDirection="left" />
         <GridColumnHeadersInner isDragging={isDragging} {...getInnerProps()}>
           {getColumnGroupHeaders()}
           {getColumnHeaders()}
         </GridColumnHeadersInner>
-        <GridScrollArea scrollDirection="right" />
       </GridColumnHeaders>
     );
   },

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Order ID 💳 (optional)

No response

[oliviertassinari]

It's a regression, I recall @DanailH worked on it (and I a bit) at the very beginning #165.