Is it possible to target an existing DOM element as a Popover Anchor

[Sashkan]

Hi !

I was wondering if I could use a specific dom Element as a Popover Anchor, instead of using the Trigger/Anchor provided by the popover.

I'm working on a Table component, displaying a list of Rows.

Each row includes a button. When clicking on that button, I'd like to display a menu. Obviously, I don't want to re-render the menu component for each line, so instead, I wanted to create a Popover that would simply use the Row as its anchor.

At first, I thought of using a portal, but if I understand well, the Trigger/Anchor have to be inside of the Popover, which means that I cannot both wrap my Row as a Trigger/Anchor AND use it as portal ref.

It it possible to achieve this ? Or do I have to add a Popover for each Row ?

[jjenzz]

Obviously, I don't want to re-render the menu component for each line

Perhaps if we could see the design you are trying to achieve we can help a bit more but creating components for re-used parts of your UI would be the approach we would recommend. Something like this: https://codesandbox.io/s/magical-dirac-q1heu?file=/src/App.js

It's probably also worth mentioning that we have a DropdownMenu component intended for menus. It has built in accessibility for that use-case which the Popover will not handle. It can only be anchored to the Trigger at the moment though unfortunately.

[bryanmylee]

I'm building an onboarding system to guide a user through the platform with hints.

Sometimes, it would be really helpful to be able to pass a DOM reference or node directly to be used as the anchor because:

1. some components are blackboxes from third parties, and the only way to get the anchor is via query selectors.
2. adding <PopoverAnchor/> to our components mixes up the concerns for our custom components, which should not be concerned about the onboarding / hinting system.

I'd rather build the onboarding system without re-writing my application to place <PopoverAnchor/> everywhere.

[marcoms]

I'm also using fullcalendar and having the same problem. The current workaround is to create a separate fixed position element and track the location of the chosen date with .getBoundingClientRect() on an interval. Not the cleanest or most performant solution unfortunately

[alxrocha]

The PopoverAnchor accepts a virtualRef prop, might be what you're looking for. Something like this: https://codesandbox.io/s/black-sea-xzl2z2?file=/src/App.js.

[jamesamuel]

@alxrocha - Could you re-share this workspace please?

[henok-tesfaye72]

I'm able to do it like this,

type MeasurableElement = {
  getBoundingClientRect: () => DOMRect,
};

export const TagPopover = ({ triggerNode }: { triggerNode: MeasurableElement } ) => {
  const virtualRef = useRef<MeasurableElement | null>(null);

  // Set the virtual ref to the trigger node
  if (triggerNode)
    virtualRef.current = triggerNode;

  return (
    <RadixPopoverRoot open={open} onOpenChange={handleOpenChange}>
      <RadixPopoverAnchor virtualRef={virtualRef} />
    ...
   </RadixPopoverRoot>

And triggerNode can be an existing DOM element, that you get it using getElementById or it can also be a Range from a selection, so it can be anything that has getBoundingClientRect method, so the popover will find out where to display it.