Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

Question

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

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

The Popover above is causing an issue when trying to trigger the onMouseLeave event. It seems that due to the lack of other HTML elements surrounding it, the action is not being emitted. Is there a way to resolve this problem and make the event work as intended?

If you need more information on Popovers, check out the documentation here - https://material-ui.com/utils/popover/

html css reactjs material-ui

Answer 1

Answer №1

One suggestion is to use the onMouseLeave event with PaperProps, like this: {{onMouseLeave: onClose}}

Answer 2

One suggestion is to use the onMouseLeave event with PaperProps, like this: {{onMouseLeave: onClose}}

Answer 3

Answer №2

Dealing with a similar issue, their provided example proved to be unhelpful.

The solution is to turn off the pointer events:

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

For an improved approach, consider using the Popper component instead.

Answer 4

Dealing with a similar issue, their provided example proved to be unhelpful.

The solution is to turn off the pointer events:

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

For an improved approach, consider using the Popper component instead.

Answer 5

Answer №3

It seems similar to my experience. Feel free to reach out if you find it useful.

<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
    >

Answer 6

It seems similar to my experience. Feel free to reach out if you find it useful.

<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
    >

Answer 7

Answer №4

I'm a bit uncertain about your objective, but Material-UI Popover includes an onExit feature that is similar to onMouseLeave.

Perhaps you can try 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={() => {
         INSERT YOUR CODE HERE TO PERFORM ACTIONS!
       }}
     >

Answer 8

I'm a bit uncertain about your objective, but Material-UI Popover includes an onExit feature that is similar to onMouseLeave.

Perhaps you can try 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={() => {
         INSERT YOUR CODE HERE TO PERFORM ACTIONS!
       }}
     >

Answer 9

Answer №5

Utilize these properties

slotProps={{ paper: { onMouseLeave: handleMenuMouseLeave } }}

Below is the entire code snippet

import * as React from "react";
import Button from "@mui/material/Button";
import Popover from "@mui/material/Popover";
import MenuItem from "@mui/material/MenuItem";

export default function PositionedMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
    console.log("open");
  };

  const handleClose = () => {
    console.log("closed");
    setAnchorEl(null);
  };

  const handleMenuMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
    console.log("menu mouse enter");
  };

  const handleMenuMouseLeave = () => {
    console.log("menu mouse leave");
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="demo-positioned-button"
        aria-haspopup="true"
        variant="text"
        sx={{ color: "black" }}
        aria-expanded={open ? "true" : undefined}
        onMouseEnter={(e) => handleClick(e)}
      >
        Parent
      </Button>
      <Popover
        id="demo-positioned-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        onMouseEnter={handleMenuMouseEnter}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        sx={{ marginTop: "20px" }}
        slotProps={{ paper: { onMouseLeave: handleMenuMouseLeave } }}
      >
    
        <MenuItem onClick={handleClose}>Child 1</MenuItem>
        <MenuItem onClick={handleClose}>
         Child 2
        </MenuItem>
        <MenuItem onClick={handleClose}>Child 3</MenuItem>
      </Popover>
    </div>
  );
}

Answer 10

Utilize these properties

slotProps={{ paper: { onMouseLeave: handleMenuMouseLeave } }}

Below is the entire code snippet

import * as React from "react";
import Button from "@mui/material/Button";
import Popover from "@mui/material/Popover";
import MenuItem from "@mui/material/MenuItem";

export default function PositionedMenu() {
  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
  const open = Boolean(anchorEl);

  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
    setAnchorEl(event.currentTarget);
    console.log("open");
  };

  const handleClose = () => {
    console.log("closed");
    setAnchorEl(null);
  };

  const handleMenuMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
    console.log("menu mouse enter");
  };

  const handleMenuMouseLeave = () => {
    console.log("menu mouse leave");
    setAnchorEl(null);
  };

  return (
    <div>
      <Button
        id="demo-positioned-button"
        aria-haspopup="true"
        variant="text"
        sx={{ color: "black" }}
        aria-expanded={open ? "true" : undefined}
        onMouseEnter={(e) => handleClick(e)}
      >
        Parent
      </Button>
      <Popover
        id="demo-positioned-popover"
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        onMouseEnter={handleMenuMouseEnter}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "left",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "left",
        }}
        sx={{ marginTop: "20px" }}
        slotProps={{ paper: { onMouseLeave: handleMenuMouseLeave } }}
      >
    
        <MenuItem onClick={handleClose}>Child 1</MenuItem>
        <MenuItem onClick={handleClose}>
         Child 2
        </MenuItem>
        <MenuItem onClick={handleClose}>Child 3</MenuItem>
      </Popover>
    </div>
  );
}

Handling onMouseLeave event for Popover component in material ui library with hiderBackdrop parameter specified

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is the best way to merge makeStyle classes from both the parent and child components together?

Having trouble loading CSS and JavaScript files in CodeIgniter?

Style large and small text side by side with CSS styling

Unable to start React Native CLI Project Initialization

The Material UI button feature neglects to account for custom CSS styles when attempting to override the default settings

Displaying icons from an array using Material-UI

Modify the contents of the 'data-content' area in the popover

Transferring an object between pages in NextJS

When the add button is clicked, I would like to implement a feature where a checkbox is added

Alignment issue with Bootstrap dropdowns noticed after dynamically loading dropdown content in Blazor

Create a Bootstrap multi-bar component for visually displaying the daytime information

Creating a dynamic div with various paragraphs using only Javascript

The object entries map fails to display

What is the best way to neatly import multiple images in Next.js?

Responsive tables in Bootstrap 4 that are nested

Issue with unit tests failing to properly update states after calling setState within a callback function

`More than one path from a single location in NextJs`

The WebSocket has already transitioned to the CLOSING or CLOSED state in Socket io

Analyze React.js source code for errors, instead of focusing solely on the DOM manipulation aspect

Executing VueJS keyup handler after the previous onclick handler has been executed