[material-ui][menu] It doesn't accept TransitionComponent={(props)=>...}

[DrJKL]

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/s/transitioncomponentmenubug-y6llsv?file=/Demo.tsx

Steps:

1. Click Dashboard button 👆
2. Observe Menu 👀
3. Click away (or hit Escape) ⌨️
4. Try to click Dashboard a second time. 👆
5. See no menu
6. Swap the comment block toggle at line 36 and repeat steps 1-4

Current behavior 😯

The menu will work once, then the menu trigger fails.
The console has these errors:

Warning: Failed prop type: Invalid prop `children` supplied to `ForwardRef(Modal)`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
...

Warning: Failed prop type: Invalid prop `children` supplied to `FocusTrap`. Expected an element that can hold a ref. Did you accidentally use a plain function component for an element instead? For more information see https://mui.com/r/caveat-with-refs-guide
...

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `FocusTrap`.

Expected behavior 🤔

The menu renders with the provided transition, then goes away, but doesn't break the page so it can be accessed again.

Context 🔦

I want to Slide relative to a container, So I'd need to pass the container ref to the Slide instead of just referencing the function constructor.

Your environment 🌎

Browsers

``` Replicates in codesandbox in - Firefox 116.0.3 (64-bit), - Chrome Version 116.0.5845.111 (Official Build) (64-bit) - Min v1.28.1 - Edge Version 116.0.1938.54 ```

[sai6855]

@DrJKL you have to create custom component and pass ref through React.forwardRef to make it working.

here is the working sandbox: https://codesandbox.io/s/jovial-perlman-kc32tt

complete code:

import * as React from "react";
import Button from "@mui/material/Button";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
import { Slide } from "@mui/material";

const CustomSlide = React.forwardRef((props, ref) => (
  <Slide {...props} ref={ref} />
));

export default function FadeMenu() {
  const [anchorEl, setAnchorEl] = React.useState(null);
  const open = Boolean(anchorEl);
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="fade-button"
        aria-controls={open ? "fade-menu" : undefined}
        aria-haspopup="true"
        aria-expanded={open ? "true" : undefined}
        onClick={handleClick}
      >
        Dashboard
      </Button>
      <Menu
        id="fade-menu"
        MenuListProps={{
          "aria-labelledby": "fade-button"
        }}
        anchorEl={anchorEl}
        open={open}
        onClose={handleClose}
        TransitionComponent={CustomSlide}
      >
        <MenuItem onClick={handleClose}>Profile</MenuItem>
        <MenuItem onClick={handleClose}>My account</MenuItem>
        <MenuItem onClick={handleClose}>Logout</MenuItem>
      </Menu>
    </div>
  );
}

[DrJKL]

Hey @sai6855,

Thanks, I think I found the solution. I needed to pass props through TransitionProps instead of enclosing it in place.

Now there's just the issue of the menu sliding in from the viewport edge, but disappearing to the provided container.

https://codesandbox.io/s/transitioncomponentmenubugv2-dqc7lm?file=/Demo.js

[mnajdova]

The warning was indicating exactly what the issue is. I am closing.