MenuPopover position breaking

[Scotty813]

🐛 Bug report

We have a certain case when we need to set portal to false on the MenuPopover component. However, this causes the positioning to break entirely. For example, setting portal={false} and position={positionRight} so that the menu lines does not extend past the right side of the button. It appears that the position callback is not running at all when portal is false.

Current Behavior

Expected behavior

I would expect the dropdown to align to the right side of the menu button, not extending past it.

Reproducible example

https://codesandbox.io/s/relaxed-shadow-r5vu1?file=/src/index.js

Suggested solution(s)

Not sure, but the calculations for calculating positionRight when portal is set to false needs to change

Additional context

Your environment

Software	Name(s)	Version
Reach Package	"@reach/menu-button": "^0.16.1" and "@reach/popover": "^0.16.0"
React		17.0.2
Browser	chrome	94.0.4606.81
Assistive tech
Node		16.0.0
npm/yarn		7.10.0
Operating System	macOs Big Sur	11.3.1

[indiesquidge]

@Scotty813 can you please include a reproducible example of your issue using the CodeSandbox Template that's provided in the issue template, as well as describe what you mean by the positioning "breaks entirely". Would also be nice to have the rest of the details filled in on the issue template. Thanks!

[Scotty813]

Should be good to go now, let me know if you need anything else

[johnny243]

I'm experiencing the same issue. position prop has no effect when portal is set to false.

[donovanclarke]

Was the position prop intended to only be used with the portal prop set to true?