[popover] detached trigger without the Popover.Trigger element

[MonstraG]

I used to work with MUI, but recently stared with shadcn/Radix UI, and have found the pattern of <Popover.Trigger/> quite lacking.

I usually would have a table with 20-100 rows, each with a button, that opens the same menu with actions like edit | delete | etc.

When implementing this in Radix UI I was disappointed to find that I need to put <Dropdown/> in each row, around a trigger, for it to function. That felt like a huge performance performance fail, as I would have 100 copies of the same dropdown with different context.

In MUI I would place one <Menu/>, and just supply anchorEl trough home-written equivalent of Base UI's popover.createHandle.

I just accepted that as a fact of life before, but Base UI has suddenly released, and I am glad to see that as opposed to Radix UI, Base UI supports detached triggers, so I could have 100 triggers and 1 <Dropdown />, which is great!

Today, I'm working on a SVG-based room layout editor, and would like to be able to right-click the nodes to bring up custom context menu with actions:

So, left-click should drag, and right click should open the context menu. In this case, putting <Popover.Trigger/> around the <circle/> just doesn't seem to work.

How do I just pass the element ref to the popover like I used to do in MUI?

[atomiks]

How do I just pass the element ref to the popover like I used to do in MUI?

The anchor prop on the Positioner part allows you to customize the position in a similar fashion

So, left-click should drag, and right click should open the context menu. In this case, putting <Popover.Trigger/> around the just doesn't seem to work.

Can you link a Stackblitz of what you've tried so far? A detached <Popover.Trigger> should open the corresponding (shared) popover when you left click it. If you want right click functionality (like Context Menu), its anchor needs to be controlled and changed when right clicking each circle

[MonstraG]

Hi!

I didn't find the anchor prop on positioner, and I've managed to implement what I wanted with the anchor, thank you!

https://stackblitz.com/edit/d32gpyes?file=src%2FApp.tsx

The only remaining thing is just weirdness of it. I don't use the Popover.Trigger nor the Popover.createHandle, but like 3rd way instead.

Why there are 3 ways to open a popover, lol?

[mnajdova]

Hi, you can still use detached triggers, but I assume you haven't set the triggerId and this is why the popup was positioned on position 0,0.

Here is a working example, using detachable trigger and the trigger id, everything seems to work nicely: https://stackblitz.com/edit/d32gpyes-z9t7jeex?file=src%2FApp.tsx

I hope this helps, for reference this is the demo that was closest to what you needed: https://base-ui.com/react/components/popover#controlled-mode-with-multiple-triggers