Multiple target points - one popover instance

[jasonkuhrt]

Multiple target points - one popover instance

[jasonkuhrt]

What is the rationale for not wanting to render a Popover per row? E.g.:

• Are you hitting performance problems?
• Is it because you want the Popover to seamlessly transition (animate) to the next clicked row?

[isnifer]

I didn't try to test perfomance, but it's obviously. If I have only one popover, I don't want to have that more.

[isnifer]

The second argument like a feature, ha-ha. And it's pretty cool

[jasonkuhrt]

I have not done benchmarks but the Popover is managed by React like any other view I think. If you came with clear benchmark data I would be interested in seeing it. I would also be interested to see (not necessarily accept) a PR. But basically I'm not interested in taking on the complexity of manually recycling Popovers when React already does that via its DOM diffing algorithms.

[jasonkuhrt]

@isnifer I replaced the Multiple Trigger demo with a Rows demo that relates to this issue. I have taken a screenshot of the resulting DOM (below). I think its reasonable at this stage to not append a div for each popover regardless of its isOpen state. This is clearly wrong and a good first step to resolve. I still think trying to reuse DOM elements is much more advanced and further complicated by animation timing. If you agree we can make this issue about fixing the latent contains for closed popovers.

[jasonkuhrt]

I don't think will be worked on in the foreseeable future so I am going to close it.

[simb4]

So any approach for possibility of popover to be attached to different elements (Here as well we can reach nice smooth animation). This approach is possible in react-material-ui/Popover, would be nice to have it here as well.

[simb4]

The one approach I come up with is to target popover to some div, and if I need need popover to appear here or there, I simply append my div to specified element.

        <Popover {...popoverProps}>
          {/* You may alter height to align position of popover in respect to target */}
          <div ref="pop" style={{position: 'absolute', width: '100%', height: '100%',}}/>
        </Popover>

OnClick:

onElementClick = (class) => {
    let node = document.getElementsByClassName(class)[0];
    this.togglePopover(true, node);
}

 togglePopover (toState, targetNode) {
   const popoverIsOpen = typeof toState === "boolean"
     ? toState
     : !this.state.popoverIsOpen
   targetNode.appendChild(this.state.popup); // this.state.popup - is DOM element, not the ref
   this.setState({ popoverIsOpen })
 }