In my current project, I am utilizing the react-mui library and aiming to incorporate a MenuList component from the MenuList composition available here. An issue arises when passing a ref as a prop down to a child component containing a menu. For reference, you can view a codesandbox example here. When sending a ref and setRef method as props from a parent component like so:
state = {
open: false,
ref: React.createRef()
};
setRef = element => {
this.setState({ ref: element });
};
handleToggle = () => {
this.setState(state => ({ open: !state.open }));
};
handleClose = () => {
this.setState({ open: false });
};
render() {
return (
<MenuListComposition
setRef={this.setRef}
handleToggle={this.handleToggle}
handleClose={this.handleClose}
open={this.state.open}
ref={this.state.ref}
/>
);
}
To a child component featuring a menu button:
<MenuButton
className={classes.button}
handleToggle={handleToggle}
setRef={setRef}
open={open}
ref={ref}
/>
The Popper component with a menu list opens at an incorrect location, as demonstrated in the codesanbox example by clicking on the TOGGLE MENU GROW button.
<Popper open={open} anchorEl={ref} transition disablePortal>
{({ TransitionProps, placement }) => (
<Grow
{...TransitionProps}
id="menu-list-grow"
style={{
transformOrigin:
placement === "bottom" ? "center top" : "center bottom"
}}
>
<Paper>
<ClickAwayListener onClickAway={handleClose}>
<MenuList>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={handleClose}>Logout</MenuItem>
</MenuList>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
I am seeking guidance on how to rectify this issue or explore alternative methods for using ref in a stateless component without passing ref as a prop.