[Popper] The anchorEl prop provided to the component is invalid

[IAluI]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/p/sandbox/date-component-h3rd46
Video illustrating the problem: https://drive.google.com/file/d/1o4sQGAuk3N2cRw6t4o44PlE4p_hUdb23/view?usp=sharing

The example above uses a MuixTimePicker (it uses the popper component internally) to implement a date input into an AgGrid table column filter. If you click on a part of the page that is not related to either the column menu or the calendar, the calendar will jump to the upper left corner of the screen before being closed.

Current behavior 😯

Popper component (hereinafter MuiBasePopper) have useEffect witch call forceUpdate method of PopperJS instance on every time after MuiPopperBase was rendered. This behavior sometimes leads to undesirable results. In my case, the problem arises because it is not possible to correctly determine the position of the anchorEl when MuiPopperBase closing.

Expected behavior 🤔

It would be nice if forceUpdate method of PopperJS instance do not called in cases where correct updating position is not possible. Or would be some way to control this through props.

Context 🔦

When embedding MuiPopperBase and dependent components into third party libraries, we don't always have full control over the rendering process. I understand that the sudden removal of the anchorEl from the DOM is an emergency situation. But it would be nice if MuiPopperBase to handle it more gently.

The closest issue I could find.

Your environment 🌎

npx @mui/envinfo

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
Binaries:
  Node: 20.5.1 - ~/.nvm/versions/node/v20.5.1/bin/node
  Yarn: Not Found
  npm: 9.8.0 - ~/.nvm/versions/node/v20.5.1/bin/npm
Browsers:
  Chrome: 120.0.6099.129
npmPackages:
  @emotion/react: 11.11.3 => 11.11.3 
  @emotion/styled: 11.11.0 => 11.11.0 
  @mui/base:  5.0.0-beta.16 
  @mui/core-downloads-tracker:  5.15.1 
  @mui/icons-material: 5.14.9 => 5.14.9 
  @mui/lab: 5.0.0-alpha.145 => 5.0.0-alpha.145 
  @mui/material: 5.15.1 => 5.15.1 
  @mui/private-theming:  5.15.1 
  @mui/styled-engine:  5.15.1 
  @mui/system:  5.15.1 
  @mui/types:  7.2.11 
  @mui/utils:  5.15.1 
  @mui/x-date-pickers: 6.18.6 => 6.18.6 
  @mui/x-tree-view: 6.0.0-alpha.4 => 6.0.0-alpha.4 
  @types/react:  18.2.20 
  react: 18.2.0 => 18.2.0 
  react-dom: 18.2.0 => 18.2.0 
  typescript:  5.1.6

tsconfig

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "experimentalDecorators": true,
        "jsx": "react-jsx",
        "module": "esnext",
        "moduleResolution": "node",
        "paths": {
            "@/*": ["./src/*"],
            "assets": ["./public"],
            "sprite": ["./src/images/icons"]
        },
        "resolveJsonModule": true,
        "strict": true,
        "strictFunctionTypes": false,
        "strictNullChecks": true,
        "target": "esnext"
    },
    "exclude": ["node_modules", "**/*.spec.ts"]
}

[michaldudak]

We are not going to include Popper in future versions of Base UI. We will use Floating UI under the hood for all components that contain popups.

[karamws]

I have same problem but with dynamic form, with DatePicker.
any workaround?

[IAluI]

@karamws If your "dynamic form" is a parent React component, then it's probably not the same problem. One way or another, you can provide custom Popper component via slot props ({ popper: YoursFixedPopper }). You can use a copy of Popper component as a basis.