reactjs - How do I use Menu with Collapse as my TransitionComponent on Material-ui?

Question

I'm having issues using the Collapse component as my TransitionComponent on Material-UI.

Not only does it not work, it also breaks the anchor.

Fade works fine, not sure where to look for answers.

Thanks in advance.

Link to codesandbox

import React, { useState, useRef } from "react";
import ReactDOM from "react-dom";
import { Menu, MenuItem, Collapse, Fade, Typography } from "@material-ui/core";

function App() {
  const [open, toggle] = useState(false);
  const ref = useRef(null);

  return (
    <>
      <div style={{ position: "absolute", top: "50%" }} ref={ref}>
        <Typography variant="h4" className="App" onClick={() => toggle(true)}>
          Click me!
        </Typography>
      </div>
      <Menu
        TransitionComponent={Collapse}
        anchorEl={ref.current}
        open={open}
        onClose={() => toggle(false)}
      >
        <MenuItem>Item do menu</MenuItem>
      </Menu>
      <Menu
        TransitionComponent={Fade}
        transitionDuration={800}
        anchorEl={ref.current}
        open={open}
        onClose={() => toggle(false)}
      >
        <MenuItem>Item do menu</MenuItem>
      </Menu>
    </>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

标签： reactjsmenumaterial-uitransitioncollapse

Answer 1

Collapse这是与组件结合使用的已知错误Popover（由 使用Menu）：https ://github.com/mui-org/material-ui/issues/11337