question-mark
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.

[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:closed
  • Created 6 years ago
  • Comments:10 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
oliviertassinaricommented, Feb 7, 2018

@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.

2reactions
caubcommented, Feb 6, 2018

remove open if you don’t want a controlled select

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found