[DataGrid] Filter text input does not work if is inside a Dialog

[incompl]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When a DataGrid is in a Dialog and you try to add a filter, the text input for the filter doesn't get a cursor when you click on it as if it's disabled. (I don't believe it's really disabled since it has the hover behavior of being enabled)

Expected Behavior 🤔

Filtering should work normally if a Dialog

Steps to Reproduce 🕹

https://codesandbox.io/s/datagrid-in-dialog-filter-bug-ix616

Steps:

1. Open the code sandbox
2. Click the kebab icon next to "Name" to open the column menu
3. Click "Filter"
4. Click "Filter value"
5. Note you cannot input text

Context 🔦

We have a home grown version of this library that we would like to replace with DataGrid and I found this issue while evaluating it. We use tables in Dialogs for operations like data imports where you select rows to import.

Your Environment 🌎

Codesandbox.io and Chrome 92.0.4515.107

Order id 💳

I am an open source user 🥳

[DanailH]

Hi @incompl maybe I'm missing something but I wasn't able to reproduce the issue using the example you provided, maybe the codesandbox link is not up to date?

[oliviertassinari]

With a Dialog, it reproduces https://codesandbox.io/s/datagrid-in-dialog-filter-bug-forked-y54q6?file=/demo.js.

[incompl]

@DanailH Sorry about that, I guess my sandbox didn't save somehow. I reopened it and it had my fix, then I refreshed and it was gone. In any case, the sandbox that @oliviertassinari provided is the same thing that mine contained.

[edit] I believe mine is properly updated now.

[flaviendelangle]

By default I seems that the Dialog component forces the focus to stay inside it.
Adding the disableEnforceFocus to it fixes you issue.
I don't know if there is a smarter way of doing it inside the Grid.

https://codesandbox.io/s/datagrid-in-dialog-filter-bug-forked-plub7

[m4theushw]

This is actually a bug in the TrapFocus of the MUI v4. Opening a Popper (e.g. the filter panel) inside a dialog doesn't work: mui/material-ui#15694

There are 3 options to solve your problem:

1. Update Material UI to v5 as support for Portal in TrapFocus is fixed in this version

2. Add disableEnforceFocus to the Dialog

3. Disable the Portal in the filter panel:

<DataGrid componentsProps={{ panel: { disablePortal: true } }} />

Using this option, you have to update your CSS to disable the box-sizing: border-box applied to the text fields.

[oliviertassinari]

Closing per 1. it's already fixed in Material UI v5. It's about portal support in TrapFocus.

[leebask]

This is actually a bug in the TrapFocus of the MUI v4. Opening a Popper (e.g. the filter panel) inside a dialog doesn't work: mui/material-ui#15694

There are 3 options to solve your problem:

1. Update MUI to v5 as support for Portal in TrapFocus is fixed in this version
2. Add disableEnforceFocus to the Dialog
3. Disable the Portal in the filter panel:

<DataGrid componentsProps={{ panel: { disablePortal: true } }} />

Using this option, you have to update your CSS to disable the box-sizing: border-box applied to the text fields.

I think option 2 is the best choose, i was try , fixed , MUI v5