PaperProps breaks Hover Menu

[ivoiv]

Sending PaperProps breaks the "hover transfer" for Hover Menu.
When moving the mouse from the button to the menu it instantly closes.

I guess it's because the submitted PaperProps(at least the style) override Hover Menu's own, instead of them being combined.

Modified example from this example

import * as React from 'react'
import Menu from 'material-ui-popup-state/HoverMenu'
import MenuItem from '@material-ui/core/MenuItem'
import Button from '@material-ui/core/Button'
import {
  usePopupState,
  bindHover,
  bindMenu,
} from 'material-ui-popup-state/hooks'

const MenuPopupState = () => {
  const popupState = usePopupState({ variant: 'popover', popupId: 'demoMenu' })
  return (
    <React.Fragment>
      <Button variant="contained" {...bindHover(popupState)}>
        Hover to open Menu
      </Button>
      <Menu
        {...bindMenu(popupState)}
        getContentAnchorEl={null}
        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
        transformOrigin={{ vertical: 'top', horizontal: 'left' }}
        PaperProps={{ style: { borderRadius: 2 } }} // <--- This breaks the hover
      >
        <MenuItem onClick={popupState.close}>Cake</MenuItem>
        <MenuItem onClick={popupState.close}>Death</MenuItem>
      </Menu>
    </React.Fragment>
  )
}

export default MenuPopupState

[jedwards1211]

Okay, sorry for the delay, I made a dumb mistake where passing your own PaperProps.style would blow away the pointerEvents: 'auto' style I was injecting. The CI build should comment on this issue once it releases the fix.

[jedwards1211]

🎉 This issue has been resolved in version 1.8.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀