Unable to get placement prop to work with usePopover using example from docs

[mgo-af]

Hi there, big fan of react-aria! What a great project.

Feeling a little sheepish in admitting that I can't seem to figure out the right way to use the placement prop with usePopover though. 😅

Here is a Sandbox, with examples for Popover, PopoverTrigger, Dialog, Modal, ModalTrigger, and Button lifted straight from the docs

https://codesandbox.io/s/busy-orla-pmpfn9?file=/src/App.js

Can someone help me understand what I'm missing here or doing incorrectly? Thanks!

[snowystinger]

No worries, it can be a bit complex to setup. What happened if that your ref to button isn't being passed through. So the positioning code doesn't know where the target is.

You just need to replace your Button code with this https://react-spectrum.adobe.com/react-aria/usePopover.html#button to match the rest of the example.
You could also do a forwardRef and rename the prop you pass to Button to be ref instead of buttonRef

[mgo-af]

thanks!

https://codesandbox.io/s/busy-orla-pmpfn9?file=/src/PopoverTrigger.tsx:527-542

👍