[DataGridPro]Display bug occurs when drag & drop RenderCell

[junichiro-watanabe]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

Display bugs occur when drag & drop RenderCell with DataGridPro https://gyazo.com/5f5e287ba321b8c9cebf7ea553d9e5ba

This does not happen with DataGrid. https://gyazo.com/264aa5783af4915f7e838db417892ecb

Expected behavior 🤔

Valid display when dragging & drop RenderCell

Steps to reproduce 🕹

Steps:

This doesn't occur in Sandbox. My code is the following in nextjs

import tw, { css } from "twin.macro";
import { DataGridPro, GridColDef, GridRenderCellParams, GridRowsProp } from "@mui/x-data-grid-pro";

const rows: GridRowsProp = [
  { id: "1", col1: "Hello", col2: "World" },
  { id: "2", col1: "XGrid", col2: "is Awesome" },
  { id: "3", col1: "Material-UI", col2: "is Amazing" },
  { id: "4", col1: "Hello", col2: "World" },
  { id: "5", col1: "XGrid", col2: "is Awesome" },
  { id: "6", col1: "Material-UI", col2: "is Amazing" },
];

const DataGridTest = () => {
  const columns: GridColDef[] = [
    {
      field: "image",
      headerName: "col1",
      width: 55,
      renderCell: (params: GridRenderCellParams) => (
        <div tw="w-full flex justify-center">
          <img src="https://avatars.githubusercontent.com/u/64312219?s=80&v=4" />
        </div>
      ),
      sortable: false,
      filterable: false,
    },
    {
      field: "col1",
      headerName: "col1",
      width: 180,
      renderCell: (params: GridRenderCellParams) => (
        <a href="https://google.com" target="_blank" style={{ color: "#556cd6", cursor: "pointer" }}>
          {params.value}
        </a>
      ),
    },
    {
      field: "col2",
      headerName: "col2",
      width: 180,
      renderCell: (params: GridRenderCellParams) => (
        <a href="https://google.com" target="_blank" style={{ color: "#556cd6", cursor: "pointer" }}>
          {params.value}
        </a>
      ),
    },
  ];

  return <DataGridPro rows={rows} columns={columns} pageSize={100} autoHeight rowHeight={55} />;
};

export default DataGridTest;

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 12.2.1 Binaries: Node: 16.12.0 - ~/.anyenv/envs/nodenv/versions/16.12.0/bin/node Yarn: 1.22.17 - ~/.anyenv/envs/nodenv/versions/16.12.0/bin/yarn npm: 8.1.0 - ~/.anyenv/envs/nodenv/versions/16.12.0/bin/npm Browsers: Chrome: 102.0.5005.61 Edge: Not Found Firefox: 93.0 Safari: 15.3 npmPackages: @emotion/react: ^11.7.1 => 11.7.1 @emotion/styled: ^11.6.0 => 11.6.0 @mui/base: 5.0.0-alpha.77 @mui/icons-material: 5.4.1 @mui/material: ^5.6.2 => 5.6.2 @mui/private-theming: 5.6.2 @mui/styled-engine: 5.6.1 @mui/system: 5.6.2 @mui/types: 7.1.3 @mui/utils: 5.6.1 @mui/x-data-grid: ^5.8.0 => 5.8.0 @mui/x-data-grid-generator: ^5.11.1 => 5.11.1 @mui/x-data-grid-premium: 5.11.1 @mui/x-data-grid-pro: ^5.10.0 => 5.10.0 @mui/x-license-pro: ^5.10.0 => 5.10.0 @types/react: ^17.0.37 => 17.0.37 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 styled-components: 5.3.3 typescript: ^4.4.4 => 4.5.2 ```

Order ID 💳 (optional)

No response

[m4theushw]

Please provide a minimal reproduction test case with the latest version and without other dependencies. This would help a lot 👷. A live example would be perfect. This codesandbox.io template may be a good starting point. Thank you!

[junichiro-watanabe]

@m4theushw Thank you for reply. I was unable to reproduce this event in the sandbox. Below is our web site , and here it is reproduced. I wonder why this only occurs in the paid pro version.

https://gyazo.com/91d4bd6b2758c8b9c53ef31012b3e582

I have prepared a test account, so could you please check it?

Website: https://www.coinfra.io/ E-mail: mui-datagrid-pro@test.com Password: WijwkJL2

[m4theushw]

I can see the bug in the website but I can't debug it. If you use simple cells, not renderCell, do you still experiment the bug?

Could you describe more which other libraries you use in this project?

[junichiro-watanabe]

@m4theushw I have prepared the example repository. https://github.com/junichiro-watanabe/example-data-grid-pro/tree/master

The bug is reproduced in the above repository. https://gyazo.com/145350bf4af73e1fa65c2756f3fc54bd

[junichiro-watanabe]

@m4theushw Hello. Have you confirmed the test repository?

[m4theushw]

Thanks for the reproduction and sorry for the label. Playing with the dependencies in the repo, I noticed this bug was fixed by https://github.com/mui/mui-x/pull/4857, released in v5.12.0. Upgrading @mui/x-data-grid-pro to the latest version solves it. I'm closing this issue.

[oussamachah2020]

Hello guys, i'm using Drag and drop and also m using toolBar to add a new row. the prob is that after adding a new row the drag and drop become disable.

HELP !