'onMouseLeave for Popover with hiderBackdrop parameter (material ui)

   <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
    >

I have this kind of popover , I want to execute onMouseLeave event , but it doesn't work . How can I solve it ? It happens because as I think there is not another html element out of this element , and this is a reason that it doesn't emit any action . Maybe exist solving of this issue ?

Here is the link on the doc - https://material-ui.com/utils/popover/

htmlcssreactjsmaterial-ui


Solution 1:[1]

Try onMouseLeave to the PaperProps={{onMouseLeave: onClose}}

Solution 2:[2]

I had the same problem, and their example does not help.

You need to disable the pointer events:

<Popover
    style={{ pointerEvents: 'none'}}
    disableRestoreFocus
    ...
>
...

Or even better, use the Popper component, apparently.

Solution 3:[3]

maybe this is like what happened to me,Let me know if it is helpful.

<ButtonColorCircle
      aria-owns={open ? 'color-popover' : undefined}
      aria-haspopup="true"
      onMouseEnter={handleClick}
      // onMouseLeave={handleClose}
     /> 

<Popover
       id="color-popover"
       key={element.name}
       className={classes.popover}
       PaperProps={{onMouseLeave: handleClose}}
       onExit={handleClose}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
    >

Solution 4:[4]

I am not too sure about what you are trying to execute but Material-UI Popover has onExit feature which is equivalent to onMouseLeave.

Maybe you can do something like this,

     <Popover
       key={element.name}
       className={classes.popover}
       classes={{
         paper: classes.paper
       }}
       open={open}
       anchorEl={this.myRef.current}
       anchorOrigin={{
         vertical: 'bottom',
         horizontal: 'left'
       }}
       transformOrigin={{
         vertical: 'top',
         horizontal: 'left'
       }}
       disableRestoreFocus
       hideBackdrop
       onExit={() => {
         PLACE YOUR CODE HERE TO EXECUTE!!!!!
       }}
     >

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 James Hansen
Solution 2 pierpytom
Solution 3 onair
Solution 4 Dharman

Related Questions