Material-ui: [Menu] Add a Dropdown example

[dethi]

• [X] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Since Menu inherited from Popover, we should be able to change the value of anchorOrigin.

Current Behavior

Changing the property vertical of anchorOrigin change nothing. The Menu is still attached to the top of the anchor. horizontal property works great.

Steps to Reproduce

https://codesandbox.io/s/6nllq0zzlz

SimpleMenu doesn't take into accounts the vertical property of anchorOrigin. SimplePopover is the same code, with Menu replaced with Popover (and the expected behavior).

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.38 |
| React | 16.2.0 |
| browser | Chrome 65 |

[oliviertassinari]

@dethi You have missed the warning in the console:

Material-UI: you can not change the default anchorOrigin.vertical value
when also providing the getContentAnchorEl property to the popover component.
Only use one of the two properties.
Set getContentAnchorEl to null or left anchorOrigin.vertical unchanged.

[oliviertassinari]

        <Menu
          anchorEl={anchorEl}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "right"
          }}
+         getContentAnchorEl={null}

https://codesandbox.io/s/x8k6446oz

[dethi]

Indeed, didn't notice the console log with all our Redux logging... Thanks!

[eaconway]

I'd highly recommend changing the text in the MUI Menu page to include a clearer description of how/what is happening here. I, like this and a few other threads, have had trouble using the anchor playground solutions in menus.

The Menu component uses the Popover component internally. However, you might want to use a different positioning strategy, or not blocking the scroll. For answering those needs, we expose a MenuList component that you can compose, with Popper in this example.

[oliviertassinari]

@eaconway Thank you for raising the concern! I agree, I think that we should make it easier for people to learn how to change the positioning to create a dropdown like experience. It's in the specification.
Would you want to improve the documentation? :)

[micksatana]

The example having both anchorOrigin and transformOrigin

<Menu
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}
  transformOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}

In my case, I remove transformOrigin and it works!

<Menu
  anchorOrigin={{
    vertical: 'top',
    horizontal: 'right',
  }}

Hope this helps someone