Column resizing on mobile does not work correctly and width scales inversely

[jameswilliams-modality]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Column resizing on mobile use touch input does not work correctly and width scales inversely.

Expected behavior 🤔

Column resizing on mobile using touch input should work the same as using the mouse pointer.

Steps to reproduce 🕹

Steps:

1. Open https://codesandbox.io/s/columnsizinggrid-material-demo-forked-i9n5jr
2. If you are not on a touch enabled device, switch to mobile / responsive mode to emulate touch input with the pointer.
3. Attempt to resize the columns on the commercial data grid example using touch input.
4. Note that the column width is not computed correctly and scales inversely and non-linearly.

Context 🔦

The root cause is that columnSeparator inner svg captures the touch event instead of the columnSeparator div, getSeparatorSide doesn't match the columnSeparator--sideRight grid class as the element is the svg instead ofthe div, separatorSide is set to 'left', and computeNewWidth adds the wrong width increment to initialOffsetToSeparator.

I have resolved this for now by disabling pointer events on the svg

'& .MuiDataGrid-columnSeparator--resizable svg': {
  pointerEvents: 'none',
},

using the sx prop on DataGrid.

History of other issues relating to column resizing on mobile (none that describe the current issue)

• [DataGrid] Add support for Column resizing on mobile #416 column resizing on mobile requested
• [DataGrid] Add touch support on column resize #537 column resizing on mobile implemented
• [DataGrid] Exploring Plugin api #1720 bug introduced
• [XGrid] Column resizing not working on touch devices #2007 bug raised
• [XGrid] Fix column resize on touch devices #2089 bug fixed

Your environment 🌎

`npx @mui/envinfo`

System:
  OS: Linux 5.13 Ubuntu 20.04.4 LTS (Focal Fossa)
Binaries:
  Node: 16.14.2 - /usr/bin/node
  Yarn: 1.22.18 - /usr/bin/yarn
  npm: 8.5.0 - /usr/bin/npm
Browsers:
  Chrome: 100.0.4896.75
  Firefox: 99.0
npmPackages:
  @emotion/react: ^11.7.0 => 11.9.0 
  @emotion/styled: ^11.6.0 => 11.8.1 
  @mui/base:  5.0.0-alpha.75 
  @mui/icons-material: ^5.2.1 => 5.6.0 
  @mui/material: ^5.2.3 => 5.6.0 
  @mui/private-theming:  5.6.0 
  @mui/styled-engine:  5.6.0 
  @mui/styles: ^5.2.3 => 5.6.0 
  @mui/system:  5.6.0 
  @mui/types:  7.1.3 
  @mui/utils:  5.6.0 
  @mui/x-data-grid:  5.8.0 
  @mui/x-data-grid-pro: ^5.8.0 => 5.8.0 
  @mui/x-license-pro:  5.7.0 
  @types/react:  18.0.0 
  react: ^17.0.2 => 17.0.2 
  react-dom: ^17.0.2 => 17.0.2 

Order ID 💳 (optional)

#41445

[cherniavskii]

Hey @jameswilliams-modality
Thanks for raising this issue.

Would you like to submit a pull request?
Adding pointerEvents: none indeed fixes the issue:

--- a/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
+++ b/packages/grid/x-data-grid/src/components/containers/GridRootStyles.ts
@@ -187,6 +187,9 @@ export const GridRootStyles = styled('div', {
       [`&.${gridClasses['columnSeparator--resizing']}`]: {
         color: theme.palette.text.primary,
       },
+      '& svg': {
+        pointerEvents: 'none',
+      },
     },
     [`& .${gridClasses.iconSeparator}`]: {