滚动页面时，hover 上的弹出窗口应该消失 - React 的 Material UI (MUI) v5

Question

. Answers to this question are eligible for a +200 reputation bounty. dprothero wants to to this question.

When I follow the MUI v5 standard pattern to display a popover when another element is hovered over, it works fine, except when you

1. Hover over the element
2. Without moving the mouse, use the scroll wheel to scroll the document
3. The popover remains visible even after the triggering element has scrolled away

This is the usual code snippet:

    <div style={{ height: "100vh", overflow: "auto" }}>
      <div style={{ height: 1000 }}>
        <Typography
          aria-owns={open ? "mouse-over-popover" : undefined}
          aria-haspopup="true"
          onMouseEnter={handlePopoverOpen}
          onMouseLeave={handlePopoverClose}
        >
          Hover and then scroll
        </Typography>
        <Popover
          id="mouse-over-popover"
          className={classes.popover}
          classes={{
            paper: classes.paper
          }}
          open={open}
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "left"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "left"
          }}
          onClose={handlePopoverClose}
          disableRestoreFocus
        >
          <Typography>I use Popover.</Typography>
        </Popover>
      </div>
    </div>

And here's a full working demo demonstrating the problem.

How can I make the popover disappear when the user scrolls the document? I do not want to disable scrolling.

Answer 1

Why not just add an event listener that listens to scroll event to certain element (or to any element in the page) and invoke the handlePopoverClose event when the scroll event is triggered? Basically just add these lines to the component:

  ...
  // on mount, listen to scroll event on any element in the page (document, and its child)
  // if scroll is triggered, close the popover
  React.useEffect(() => {
    document.addEventListener("scroll", handlePopoverClose, true);
  }, []);

  // on unmount, remove the scroll event listener
  React.useEffect(
    () => () => {
      document.removeEventListener("scroll", handlePopoverClose, true);
    },
    []
  );
  ...

Here's the working fork demo . Note that the true was set so that it adds the scroll event listener to any child element of the page. You could also only add the scroll event listener to specific element, but it wouldn't solve the problem when the scroll is caused by other element (or window).