Material-ui: [Select] The Select's Menu is not positioned properly when using the 'open' prop

[jiminy-billy-bob]

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

Expected Behavior

When using the open prop, the Select's Menu should be positioned in the same place as if it were not a controlled component and was opened via a click.

Current Behavior

The Select's Menu is positioned in the top-left corner, or elsewhere depending on how the rest of the page is constructed.
Looking at the code, it seems that the anchorEl for the Menu is passed only from handleClick and handleKeyDown (anchorEl: event.currentTarget). When the Select is opened using the open prop, these functions are not called, therefor anchorEl is null.

Steps to Reproduce (for bugs)

CodeSandbox example : https://codesandbox.io/s/r7nvmz31nq

Context

I have a button that reveals a Select component and opens it for the user to pick an item.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.32 |
| React | 16.2.0 |
| browser | Chrome 63 |
| etc | |

[caub]

remove open if you don't want a controlled select

[jiminy-billy-bob]

remove open if you don't want a controlled select

I do want a controlled Select

[caub]

then see the error, it says it wants a onClose prop

[jiminy-billy-bob]

then see the error, it says it wants a onClose prop

This is totally unrelated.
I added an onClose function as you requested, and it doesn't change anything to the Menu positioning issue. This CodeSandbox is not intended to be a working example, it only shows the Menu positioning issue.

[caub]

yes, but better without errors

I think you'd have to provide MenuProps anchorRef for the positioning

MenuProps={{
         anchorReference: 'anchorEl',
          anchorEl: anchor,
          anchorOrigin: {vertical: 'bottom', horizontal: 'center'},
          transformOrigin: {vertical: 'top', horizontal: 'center'}
}}

https://codesandbox.io/s/ykl6v9qvxj

[jiminy-billy-bob]

@caub Your example is doing exactly what I'm trying not to do: clicking on the Select to open it.

Please read the OP again:

Looking at the code, it seems that the anchorEl for the Menu is passed only from handleClick and handleKeyDown (anchorEl: event.currentTarget). When the Select is opened using the open prop, these functions are not called, therefor anchorEl is null.

I have a button that reveals a Select component and opens it for the user to pick an item.

I want to be able to open the Select without clicking on it (from a separate button). In this case, I have no anchor to pass. I tried to pass the inputRefas the anchorEl, but it doesn't work as the inputis hidden.

I'll create a full working (except the bug) example, as you seem to have a hard time understanding the issue.

[caub]

Well, maybe you could make a custom Select (that's what I'll need to, for other reasons (placing a filter input))

a Select is just an Input and a Menu: https://codesandbox.io/s/n370kz19y0 that way you can get a ref to to Input (not the input which is indeed hidden)

But I don't know.. @oliviertassinari tagged it as bug, so maybe what you did is supposed to work (I tried with older versions, it doesn't work either)

or even just this:

<Select
            open={true}
            value={1}
            input={<Input ref={el => this.el = el} />}
            MenuProps={{
              anchorReference: 'anchorEl',
              anchorEl: this.el || fake,
              transformOrigin: { vertical: 'top', horizontal: 'left' }
            }}
          >

but it fails https://codesandbox.io/s/ykl6v9qvxj anchorElement.getBoundingClientRect is not a function in the Transition component

[jiminy-billy-bob]

I have updated the CodeSandbox with a proper working example.

@caub Surely I can write my own Select component from scratch, but the current behavior is not expected by users. You always expect a Select's Menu to be positioned correctly. Otherwise you create your own component if you want another behavior.

@oliviertassinari What do you think of this? The current implementation of the Select component is clearly designed to pass an anchorEl to the Menu only when the Select itself is clicked. But I believe it shouldn't behave that way.

[oliviertassinari]

@caub is right. It's something people can already handle on their side. I have been looking into documenting the approach. It turns out, the overhead for moving the logic in the library is minimal. I have added it.

[jiminy-billy-bob]

Perfect! Thanks a lot