Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Menu] Vertical anchoring of Popover

See original GitHub issue

Problem description

If you set the vertical value of the anchorOrigin prop for the Popover component to anything other than 0 or center, you do not get the desired result. I believe this line is the culprit:

https://github.com/callemall/material-ui/blob/1a9b612c02cd606a3ae31c8a241505a2e8e67264/src/Popover/Popover.js#L306

Looks like the expressions of the ternary operator are reversed.

Steps to reproduce

Create a Popover or other component that uses a Popover (such as a Menu) and set a anchorOrigin: vertical value of something other than ‘center’ or 0.

<Popover anchorOrigin={{vertical: 'bottom'}} ... />

Versions

Material-UI: v1.0.0-beta.6
React: 15.6.1
Browser: Any

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:22 (11 by maintainers)

Top GitHub Comments

41reactions

oliviertassinaricommented, Aug 30, 2017

Add getContentAnchorEl={null} and you should be good.

16reactions

pbasistacommented, May 20, 2020

getContentAnchorEl is documented on the Popover.

That is correct, it is mentioned there. But if I am looking correctly, that page contains no explanation or warning about the necessity to override it to null when using anchorOrigin prop with a value for vertical.

Top Results From Across the Web

[Menu] Vertical anchoring of Popover #7961 - mui/material-ui

Create a Popover or other component that uses a Popover (such as a Menu) and set a anchorOrigin: vertical value of something other...

Material UI: How to change a Menu's MenuItems anchor to ...

Material UI: How to change a Menu's MenuItems anchor to popover below instead of over. If you're here, you're probably using Material UI...

How to set Anchor to Popover in Material-UI - Stack Overflow

The Popover should be in the top-bottom corner of the button. With ref, it appears in the middle of the screen... – Jöcker....

anchororigin={{vertical: 'bottom'}} - You.com - You.com

The Menu component spreads the horizontal anchorOrigin property to it's Popover component, but doesn't seem to spread the vertical . Steps to Reproduce...

Popover API - Material UI - MUI

Name Type Default open * bool false action ref anchorEl HTML element | func