[DataGrid] Loose focus when opening a textbox portal inside a cell

[LaunoisRemy]

When we display a modal from a button included in a datagrid, we can not keep the focus inside on a TextField, it remains on the datagrid behind.
We can also delete data in row of the datagrid

Current Behavior 😯

When you try to write in a TextField in a modal display from datagrid, you lose focus directly and you can't continue, unless you spam. If you try to delete nothing happens, or rather something happens on the datagrid behind.

Steps to Reproduce 🕹

Bug on the modal in the datagrid, no out with the button (same component)
Steps:

1. Install 4.0.0-alpha.23
2. try Modal in datagrid

Your Environment 🌎

System:
OS: Windows 10 10.0.19041

Binaries:
Node: 12.18.0 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 7.6.3 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 89.0.4389.90
Edge: Spartan (44.19041.423.0), Chromium (89.0.774.57)
npmPackages:
@material-ui/core: ^4.11.3 => 4.11.3
@material-ui/data-grid: ^4.0.0-alpha.23 => 4.0.0-alpha.23
@material-ui/icons: ^4.11.2 => 4.11.2
@material-ui/lab: ^4.0.0-alpha.57 => 4.0.0-alpha.57
@material-ui/pickers: ^3.3.10 => 3.3.10
@material-ui/styles: 4.11.3
@material-ui/system: 4.11.3
@material-ui/types: 5.1.0
@material-ui/utils: 4.11.2
@types/react: 17.0.3
react: ^17.0.1 => 17.0.1
react-dom: ^17.0.1 => 17.0.1

  Same on Brave, Firefox

[oliviertassinari]

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

[oliviertassinari]

Actually, I could build a reproduction: https://codesandbox.io/s/material-demo-forked-nps4b?file=/demo.tsx. It's basically the same as #1300 (comment).

I believe the origin is #1205. Actually this PR seems to has created 3 regressions (we know of):

• [DataGrid] Loose focus when opening a textbox portal inside a cell #1295 for the focus behavior, point 5. of [DataGrid] Backspace stopped working in inputs in cells #1300 (comment).
• [DataGrid] Backspace stopped working in inputs in cells #1300 for the Backspace, handling
• [DataGrid] Roving tabindex is wrong #1291 for the Tab handling

[dtassone]

the problem with portals is that they propagate events up to the cells even if they are placed outside the cell in terms of dom.
So we need to setup a workaround to ignore all events triggered from a dialog placed inside the cell.

One way to do it is to place the dialog outside the renderCell and trigger the open from the cell with the parameter required.

I have a simple fix for the backspace error, but the click will be propagated which will trigger selection of the cell and so on...
I suggest to place the dialog in the parent scope as mentioned above. Any issue with that approach?

[oliviertassinari]

the problem with portals is that they propagate events up to the cells even if they are placed outside the cell in terms of dom.

@dtassone Right, so it's also linked #1158 since when we were using the native DOM events, we wouldn't receive the events from the portal. What would be wrong with explicitly filtering out the events coming from the portals? #1322 (comment)