[DataGrid] Failed prop type: Material-UI: The `anchorEl` prop provided to the component is invalid.

mattcarlotta commented 3 years ago

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

Current Behavior 😯

Using https://codesandbox.io/s/6czle a warning is thrown when:

1.) Hover over any column to reveal the column options (three dots) button. Click the options button to display a popover menu and select the Hide option. 2.) Hover over another column to reveal the options button. Click the options button to display a popover menu. 3.) When the popover is rendered, the following warning is thrown:

Warning: Failed prop type: Material-UI: The `anchorEl` prop provided to the component is invalid.
The anchor element should be part of the document layout.
Make sure the element is present in the document or that it's not display none.
    at Popper (https://9t6f4.csb.app/node_modules/@material-ui/core/esm/Popper/Popper.js:49:24)
    at oi (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:4548:14)
    at ii (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:4566:32)
    at div
    at Ys (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:7216:8)
    at Xs (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:7192:1)
    at div
    at eval (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:4106:21)
    at NoSsr (https://9t6f4.csb.app/node_modules/@material-ui/core/esm/NoSsr/NoSsr.js:12:24)
    at eval (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:7297:15)
    at eval (https://9t6f4.csb.app/node_modules/@material-ui/data-grid/dist/index-esm.js:7501:13)
    at div
    at AntDesignGrid (https://9t6f4.csb.app/demo.tsx:142:58)

Expected Behavior 🤔

Not to throw a warning in development.

Steps to Reproduce 🕹

https://codesandbox.io/s/6czle

For reproduction steps, see above.

Your Environment 🌎

`npx @material-ui/envinfo`

``` System: OS: Linux 5.8 Linux Mint 20.1 (Ulyssa) Binaries: Node: 14.16.0 - /usr/bin/node Yarn: 1.22.10 - /usr/bin/yarn npm: 6.14.11 - /usr/bin/npm Browsers: Chrome: 89.0.4389.114 Firefox: 87.0 npmPackages: @emotion/react: ^11.1.5 => 11.1.5 @emotion/styled: ^11.1.5 => 11.1.5 @material-ui/core: ^4.11.3 => 4.11.3 @material-ui/data-grid: ^4.0.0-alpha.24 => 4.0.0-alpha.24 @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: 16.9.49 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.2.3 => 4.2.3 ```

oliviertassinari commented 3 years ago

It's more than a warning, the placement is broken, see how the popup moves to the top left corner:

broken animation

a-m-dev commented 1 year ago

I have similar problem but not with data grid, with Popover exactly this happens 👆

Why this is closed?

ManuelGuerreroLilly commented 1 year ago

Same problem here with Popover (from Select component) but only happening while testing with mocha and not in the actual browser.

I have similar problem but not with data grid, with Popover exactly this happens 👆

Why this is closed?

EDIT:

In my case the problem was mocha not setting NODE_ENV to testing, solved it using cross-env NODE_ENV=test before mocha command

tajbowness commented 1 month ago

Wrapping the component with <Suspense> solved this issue for me

mui / mui-x