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.
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);
This is a known bug with the Collapse
transition in combination with the Popover
component (which is used by Menu
): https://github.com/mui-org/material-ui/issues/11337