How to stick popover with element that is not child of popover

[hern12]

I use contentLocation and get client position from another element that it is not the child of popover component it shows correctly when open but if I scroll up or down it follows too how to fix this. Thank you

[kovinchuk]

+1

[Russellmd]

have the same issue

[BudgieInWA]

If this is still relevant to anyone, I made a little wrapper which swaps the API around for this use case:

const RefTarget = React.forwardRef(({ target }, ref) => {
  if (typeof ref === 'function') ref(target); // Forward target to callback refs.
  else ref.current = target; // Forward target to object refs.
  return null; // Don't render anything.
});

const TargetedPopover = ({ targetElement, children, ...props }) =>
  <Popover isOpen={true} content={children} {...props}>
    <RefTarget target={targetElement} />
  </Popover>

Use it like this:

const MyPage = () => {
  const [target, setTarget] = useState(null); // Reference a DOM node however you like.
  return (
    <article>
      <h1>Hi</h1>
      <TargetedPopover targetElement={target}>This is the Popover content.</TargetedPopover>
      <MyFancyComponent childRef={setTarget} />
    </article>
  );
}

[alexkatz]

I'm not quite sure I understand what the issue here is.

Here's a code sandbox demonstrating the ability to position a popover that doesn't follow the target when scrolling, using the contentLocation prop.

[BudgieInWA]

I'm not quite sure I understand what the issue here is.

The problem is that we do want to follow an element, but we don't want to nest it under <Popover /> for whatever reason.

Here's a code sandbox demonstrating the ability to position a popover that doesn't follow the target when scrolling, using the contentLocation prop.

This demonstrates our problem, because our desired behaviour is that we create a popover that does follow some element that is already existing.

Supporting something like a targetElement prop would be very ergonomic for this use case.

[alexkatz]

@BudgieInWA In that case, the wrapper you wrote above is a clever way to do this. I may try fiddling with some kind of targetElement prop to use as an alternative to children. It's a decent idea, and I can understand situations where one may not have the desire or ability wrap the Popover component around existing JSX.

It seemed like the trouble @hern12 was having involved a popover following its target element on scroll when they'd rather have it remain stationary. That's what I tried addressing in the sandbox.

[BudgieInWA]

It seemed like the trouble @hern12 was having involved a popover following its target element on scroll when they'd rather have it remain stationary. That's what I tried addressing in the sandbox.

Ah, I had missed that. Thanks for the example, direct control like that does look powerful too.

[hern12]

It's been a long time I forgot my problem lol. Anyway thank you so much for reply