[Select] The Select's Menu is not positioned properly when using the 'open' prop
See original GitHub issue- 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 |
Issue Analytics
- State:
- Created 6 years ago
- Comments:10 (5 by maintainers)
Top Results From Across the Web
[Select] The Select's Menu is not positioned properly when ...
When using the open prop, the Select's Menu should be positioned in the same place as if it were not a controlled component...
Read more >Positioning of <MenuItems> under the Material-ui <Select> ...
In MUI 5, if the select list is too long to fit, the menu is repositioned over the select input like in MUI...
Read more >Line-by-line: advanced CSS tricks for click-to-open drop- ...
Specifically, the drop-down popup will use position: absolute in order to position itself relative to the top part of the combo box —...
Read more >React Select component - Material UI
Basic select. Menus are positioned under their emitting elements, unless they are close to the bottom of the viewport.
Read more >Positioning - Learn web development | MDN
Positioning allows you to take elements out of normal document flow and make them behave differently, for example, by sitting on top of...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.
remove
open
if you don’t want a controlled select