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.

[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.

[UndeadBaneGitHub]

With the change of virtualRef to non-nullable type, the workaround does not seem anymore possible.