[docs] Add recipe for single-click editing

[m4theushw]

Closes #2186

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-8365--material-ui-x.netlify.app/

Updated pages

• docs/data/data-grid/editing/editing.md
• docs/data/data-grid/recipes-editing/recipes-editing.md

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	495.7	1,203.9	504.9	751.18	257.898
Sort 100k rows	ms	493.2	1,156.5	1,156.5	875.1	252.738
Select 100k rows	ms	209.6	265.5	233.6	236.16	17.848
Deselect 100k rows	ms	125.1	300.2	197.8	213.28	61.153

Generated by 🚫 dangerJS against c29c34c

[cherniavskii]

Wouldn't excluding the rows/cells from the cellModesModel exit the editing mode?

In https://deploy-preview-8365--material-ui-x.netlify.app/x/react-data-grid/editing/#controlled-mode it says:

The options passed to both model props only take effect when mode changes. Updating the params of a cell or row, but keeping the same mode, makes the cell or row to stay in the same mode. Also, removing one field or row ID from the object will not cause the missing cell or row to go to "view" mode.

But I have tried removing them from the model and didn't notice any difference:
https://codesandbox.io/s/festive-raman-qz19hf?file=/demo.tsx

[m4theushw]

Yes, only removing the row is enough if only a cell is allowed to be editable at a time. If multiple cells can be edited at the same time, then we can't remove the row. This demo implements the most broader scenario, allowing further customization.

[DannyMeister]

The code sample in this recipe suffers from a bug where the initial value is lost if the cell edit is initiated from an api call to startCellEditMode() which passes an initialValue property. I have linked a sample fix to #2186 (comment) . For convenience here's the direct link as well. https://codesandbox.io/s/material-demo-forked-c0ldcq?file=/demo.tsx

[noah-lee]

Thank you for looking into adding a demo for this! I have been using this workaround but found a small issue when upgrading to v6 with single select edit cells:

Once the select cell menu is open, clicking away does not close/change back to view mode Reproduction: https://codesandbox.io/s/material-demo-forked-wco42h?file=/demo.tsx

It seems like the click event on the backdrop is passing through and triggering handleCellClick instead. The workaround I found was to add:

slotProps={{
  baseSelect: {
    onClick: (event) => event.stopPropagation()
  }
}}

[m4theushw]

@noah-lee Thanks for pointing that. We need to ignore clicks from Portals. I fixed this in 06b5d3e.