[data-grid] Improve support for DataGrid inside DataGrid

[C-Pettersson]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Pressing a cell shouldn't return an error saying the column is undefined.

Expected behavior 🤔

Cell should be selected or at least no error.

Steps to reproduce 🕹

codesandbox:
Link

Steps:

1. Go to codesandbox
2. Press Open on row id 1
3. Click on the cell for Kiwi-value
4. You are prompted with an error

Context 🔦

I'm trying to show additional information in a Modal

Your environment 🌎

`npx @mui/envinfo`

System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.14.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.11 - C:\Program Files\nodejs\yarn.CMD
    npm: 7.23.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 99.0.4844.74
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.46)
  npmPackages:
    @emotion/react: ^11.8.1 => 11.8.2
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/base:  5.0.0-alpha.72
    @mui/icons-material: ^5.5.0 => 5.5.1
    @mui/material: ^5.5.0 => 5.5.1
    @mui/private-theming:  5.4.4
    @mui/styled-engine:  5.4.4
    @mui/system:  5.5.1
    @mui/types:  7.1.3
    @mui/utils:  5.4.4
    @mui/x-data-grid: ^5.6.0 => 5.6.1
    @types/react:  17.0.40
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2

Order ID 💳 (optional)

No response

[m4theushw]

You need to stop the propagation of the click event in the modal.

<div onClick={(event) => event.stopPropagation()}
  <DataGrid />
</div>

Here's the updated CodeSandbox: https://codesandbox.io/s/debug-modal-with-datagrid-forked-uvnqds?file=/src/TinyInfo.tsx:324-384

[C-Pettersson]

Thanks for the solution, really appreciate it. Is this something I'm expected to know? If so, how would one go about figure it out?

[m4theushw]

Is this something I'm expected to know?

No, this use case was tricky because is a DataGrid inside another DataGrid, considering the React tree. If you render any other component, not a DataGrid, it won't crash.

I updated the label because there's an opportunity to improve the support for DataGrid inside DataGrid. The following function returns the incorrect element.

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

Lines 156 to 158 in 249969c

	const publishClick = React.useCallback(
	(event) => {
	const cell = findParentElementFromClassName(event.target, gridClasses.cell);

When one cell from the child DataGrid is clicked, publishClick is called twice: first in the child grid and again in the "master" grid. In the click inside the master instance, event.target still refers to the child grid so it gets the wrong field name.

[C-Pettersson]

Thanks for the explanation. Guess that's what you get for liking DataGrid too much, putting DataGrid in DataGrid 😄

[akshaylive]

Stopping event propagation completely will mess up editable columns in the child DataGrid. Here's an alternative solution to fix this:

onClick={(event) => event.target = document.body}

[jorge-ardila]

Is there any progress on this solution?

[kennyma-eplus]

Can't believe this bug won't fix after a year
I still need to use onClick={(event) => event.target = document.body} for workaround

But i am not sure if this workaround will affect anything about <Dialog/>

[colespencer1453]

@m4theushw I'm having issues with some edit interactions in this use case when using your proposed solution. The solution proposed by others shown below does fix the issue, but I was wondering if you know of any reasons this could be potentially dangerous or introduce side effects?

onClick={(event) => event.target = document.body}

[cherniavskii]

The issue is fixed in Data Grid v7: https://stackblitz.com/edit/react-s3awys?file=Demo.tsx

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@C-Pettersson: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.