[DataGrid] Custom filter with <Select> closes the filter dialog straightaway

[Bluefitdev]

• 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 😯

Using Select component at the custom filterOperators closes the filter dialog straightaway

Expected Behavior 🤔

Should be able to filter based on custom select component

Steps to Reproduce 🕹

Here's the https://codesandbox.io/s/datagrid-bug-demo-3tmw7?file=/src/App.js, reproducible on XGrid

Your Environment 🌎

Browser: Chrome

`npx @material-ui/envinfo`

npx: installed 2 in 4.577s

  System:
    OS: macOS 11.2.3
  Binaries:
    Node: 12.20.0 - ~/.nvm/versions/node/v12.20.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v12.20.0/bin/yarn
    npm: 6.14.8 - ~/.nvm/versions/node/v12.20.0/bin/npm
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Not Found
    Firefox: 76.0.1
    Safari: 14.0.3
  npmPackages:
    @material-ui/core: ^4.11.2 => 4.11.2
    @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.2.10 => 3.2.10
    @material-ui/styles:  4.11.2
    @material-ui/system:  4.11.2
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @material-ui/x-grid: ^4.0.0-alpha.23 => 4.0.0-alpha.23
    @material-ui/x-license:  4.0.0-alpha.21
    @types/react:  17.0.0
    react: ^17.0.1 => 17.0.1
    react-dom: ^17.0.1 => 17.0.1
    styled-components: ^5.1.1 => 5.2.1
    typescript:  3.9.7

Order id 💳

I have purchased the XGrid license as well, order: #23091

Thanks guys

[oliviertassinari]

I have updated the reproduction to use @material-ui/core v5, same issue: https://codesandbox.io/s/datagrid-bug-demo-forked-u7dec. I have also grouped the files to make it easier to use the reproduction locally.

[m4theushw]

@oliviertassinari Related to mui/material-ui#18586. The diff you proposed could be a solution.

Disabling the Portal created another bug:

[oliviertassinari]

@m4theushw Oh wow, great investigation 🙏! I had completely forgotten this one. 👍 for fixing this in the core (v5). I assume the target gets removed from the DOM by the time the event bubble back to the document.

How about we?

• open a new issue in the core, with a simplified reproduction
• we add a solution
• we label it as "good first issue"
• we wait for somebody to pick it up

[oliviertassinari]

I'm closing for mui/material-ui#25578 as this repository has no leverages to solve the issue nor it should even try.

You can subscribe to the linked item to know when it will be fixed in core v5.