[question] How to Get Detail Panel to Work With Right Click Menu

[conerye]

Order ID 💳

331993142

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

The problem in depth 🔍

I had a table working with a detail panel - when I opened the detail panel for the first row in the table, the rows below were displayed below the detail panel. Then I added a right-click menu... Now when I open the detail panel for the first row, it covers the rows below it. I would like to be able to have the right-click menu and the detail panel on the same table, with the detail panel working as it was before I added the right-click menu, where expanding the detail panel does not cover table rows. How can this be achieved?

Here is a codesandbox showing the issue: https://codesandbox.io/s/practical-chatterjee-5zpw6n?file=/src/ExpandAndRightClick.jsx
To see the issue, expand the detail panel for the first row in the table -> observe detail panel covers the remaining table rows.
Comment out the right click menu and then expand the detail panel for the first row in the table -> observe detail panel does not cover the remaining table rows.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19042
  Binaries:
    Node: 16.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 8.5.5 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 106.0.5249.103
    Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.42)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.3
    @emotion/styled: ^11.8.1 => 11.9.3
    @mui/base:  5.0.0-alpha.87
    @mui/icons-material: ^5.8.0 => 5.8.4
    @mui/material: ^5.8.1 => 5.8.6
    @mui/private-theming:  5.9.1
    @mui/styled-engine:  5.8.7
    @mui/system: ^5.9.1 => 5.9.1
    @mui/types:  7.1.4
    @mui/utils:  5.10.6
    @mui/x-data-grid: ^5.13.1 => 5.14.0
    @mui/x-data-grid-premium: ^5.14.0 => 5.14.0
    @mui/x-data-grid-pro:  5.14.0
    @mui/x-date-pickers: ^5.0.0-beta.1 => 5.0.0-beta.2
    @mui/x-date-pickers-pro: ^5.0.0-beta.0 => 5.0.0-beta.2
    @mui/x-license-pro: ^5.17.0 => 5.17.0
    @types/react:  18.0.14
    react: ^18.1.0 => 18.2.0
    react-dom: ^18.1.0 => 18.2.0
    typescript:  4.7.4

[cherniavskii]

Hey @conerye
Thanks for reporting this!

You can do this instead:

<DataGridPremium
  sx={{
    "& .MuiDataGrid-row": {
      cursor: "context-menu"
    }
  }}
/>

Demo: https://codesandbox.io/s/nifty-hooks-n93677?file=/src/ExpandAndRightClick.jsx

[cherniavskii]

The fix for this issue would be to merge style coming from getRowProps and rootProps.componentsProps?.row

mui-x/packages/grid/x-data-grid/src/hooks/features/virtualization/useGridVirtualScroller.tsx

Lines 494 to 495 in 4d77507

	{...(typeof getRowProps === 'function' ? getRowProps(id, model) : {})}
	{...rootProps.componentsProps?.row}

[conerye]

@cherniavskii I incorporated the suggested workaround into our app and it is working well. Thank you.