bindHover on menu

hey there I’m trying to use bindHover with bindMenu but when mouse moves on sub menu list is closed… am I doing something wrong ? if not I think it’s good feature to add

                        {
                            popupState => (
                                <React.Fragment>
                                    <MenuItem
                                        className={classes.menuItem}
                                        {...bindHover(popupState)}>
                                        {item.title}
                                    </MenuItem>
                                    <Menu
                                        anchorOrigin={{
                                            vertical: "bottom",
                                            horizontal: "right"
                                        }}
                                        className={classes.popover}
                                        getContentAnchorEl={null}
                                        TransitionComponent={Fade}
                                        {...bindMenu(popupState)}
                                    >
                                        elevation={1}
                                        >
                                        {
                                            item.subMenu.map((sub, j) =>
                                                <NavLink to={sub.path} key={j}>
                                                    <MenuItem
                                                        className={classes.subMenu}
                                                    >
                                                        {sub.title}
                                                    </MenuItem>
                                                </NavLink>
                                            )}
                                    </Menu>
                                </React.Fragment>
                            )
                        }
                    </PopupState>```

[jedwards1211]

@schemenauero btw, in this branch the hooks and render props APIs now share code under the hood and the hooks API supports bindHover 💪

[jedwards1211]

You’re welcome!

To be perfectly clear, there is not just a backdrop, but also a modal root element enclosing the backdrop and the popover. It renders like this:

<div> (modal root)
  <div /> (backdrop)
  <div> (Paper)
    (popover content)
  </div>
</div>

Popover hides the backdrop element, but there is currently no getting rid of the modal root element and mounting the Paper element by itself. So one has to make the modal root invisible to the mouse while keeping the paper visible to the mouse.

I figured out that the following styles on the Popover will accomplish what we need with hover interaction:

const styles = {
  popover: {
    pointerEvents: 'none',
  },
  paper: {
    pointerEvents: 'auto',
  },
}

...
        <Popover
          {...bindPopover(popupState)}
          className={classes.popover}
          classes={{
            paper: classes.paper,
          }}

I don’t want you guys to have to write these styles everywhere you use hover interaction though. I guess the best solution is to have this library export a Popover wrapped with these styles for convenience (as well as a Menu).