How to get ref to DOM element of Menus/Popovers

I’m trying to make material-ui-popup-state’s bindHover keep the popover open while either the anchor element or the menu or popover is hovered (https://github.com/jcoreio/material-ui-popup-state/issues/3). I can’t do this properly unless I can get a ref to the actual DOM element of the menu or popover.

But with findDOMNode being deprecated, it seems like I’m screwed.

Can’t use PaperProps={{ref: c => this.popover = c}}, that gets a reference to a component instead of a DOM element. Paper doesn’t support any kind of innerRef prop; I could pass it a component that renders with the ref I need but that would be messy.

To make matters worse, if I find the DOM element with the id I pass to the menu or popover, it’s the container element that fills the whole screen rather than the menu/popover part. Same goes for the currentTarget of event handlers passed to menu or popover.

Maybe I can use PaperProps={{ onMouseEnter: e => this.popover = e.currentTarget }}, but the problem with that is the mouseenter event would come after the mouseleave on the anchor element.

This sucks. I kind of hate that the React team doesn’t want to allow us to find the root DOM node within a Component.

[oliviertassinari]

I’m closing for #10825. It should be good now after @eps1lon work:

      <Popover
        ref={ref => {
          console.log('ref', ref);
        }}
        id={id}

Outputs in the console:

[rotimi-best]

@oliviertassinari oh that’s cool, I tried googling it but couldn’t find it. How do I know when a ref resolves in a function (like in a useEffect or a prop function)?