[Select] Menu opens above input with lots of options in v5 without a maxHeight

[raccmonteiro]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

No response

Current behavior 😯

See expected behavior first.
in v5 this does not work, and I tried a lot of different props and it does not work. Behavior in v5:

This popover over the input also happens when we have a lot of options that does not fit into screen, it's not just with resizing. I can live without the resizing part, but when I click on the input to open the menu, the popover should open always below the input.

Expected behavior 🤔

In v4 we could use this props in Select to have the menu always below the input:

MenuProps={{
            anchorOrigin: {
              vertical: "bottom",
              horizontal: "left"
            },
            getContentAnchorEl: null
          }}

Context 🔦

I want the same behavior as in v4

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[skmanoj322]

hi i would like to pick these issue

[raccmonteiro]

is there any update to this?
@skmanoj322 did you start to solve?

I really needed this and unfortunately I don't have enough knowledge to understand the MUI library and fix it.
thanks

[skmanoj322]

@raccmonteiro just wating for someone to respond. So can I start working on this problem?

[skmanoj322]

@michaldudak are you working on this issue?

[ZeeshanTamboli]

The position of the Popover under the Select is dynamically calculated based on the anchorEl. When you resize the window the window's resize event is being executed during which the Popover's position styles is calculated. But I think the styles are relative to the window, not to the select component.
So, I tried setting the anchorEl to Select and provide it under the MenuProps so that the top and left positioning properties are calculated relative to the Select but it is not working as expected.

Maybe I am missing something here.

cc @michaldudak

[raccmonteiro]

@ZeeshanTamboli I updated the description: "This popover over the input also happens when we have a lot of options that does not fit into screen, it's not just with resizing. I can live without the resizing part, but when I click on the input to open the menu, the popover should open always below the input."
Hope it helps in some way.

[ZeeshanTamboli]

@raccmonteiro If that's the case, it is similar to #34338. The solution is provided in #34338 (comment) to add maxHeight to the Menu. See https://codesandbox.io/s/gracious-james-7xbujq?file=/demo.js. I hope it helps.

If resizing is not your concern we can close this issue.

[raccmonteiro]

@raccmonteiro If that's the case, it is similar to #34338. The solution is provided in #34338 (comment) to add maxHeight to the Menu. See https://codesandbox.io/s/gracious-james-7xbujq?file=/demo.js. I hope it helps.

If resizing is not your concern we can close this issue.

but in that case I need to calculate the screen size and find out the maxHeight for every Select I have, that's not a solution for me. I can use it temporarily but I would like to have a correct solution

[ZeeshanTamboli]

but in that case I need to calculate the screen size and find out the maxHeight for every Select I have, that's not a solution for me. I can use it temporarily but I would like to have a correct solution

The maxHeight is a percent value so I think it should work on different sizes. Also, how would we know the amount of options you could have? How do you think we can handle that on our side?

[raccmonteiro]

but in that case I need to calculate the screen size and find out the maxHeight for every Select I have, that's not a solution for me. I can use it temporarily but I would like to have a correct solution

The maxHeight is a percent value so I think it should work on different sizes. Also, how would we know the amount of options you could have? How do you think we can handle that on our side?

I am not sure. Since it was working well on v4, I thought this would be a simple fix

[Toshiuk]

@raccmonteiro If that's the case, it is similar to #34338. The solution is provided in #34338 (comment) to add maxHeight to the Menu. See https://codesandbox.io/s/gracious-james-7xbujq?file=/demo.js. I hope it helps.
If resizing is not your concern we can close this issue.

but in that case I need to calculate the screen size and find out the maxHeight for every Select I have, that's not a solution for me. I can use it temporarily but I would like to have a correct solution

I have the same scenario on my side, and set maxHeight is not a solution....

[ZeeshanTamboli]

Alright, I am re-opening this issue. It works in Material UI v4 with lots of menu items without providing a maximum height to the Menu. Setting an inbuilt max-height on the Menu could be the solution.

This is also vaguely similar to #21561. I am uncertain, but replacing the positioning logic of the Popover component with the Popper one could fix the issue.

[michaldudak]

We've recently merged in #37773, which could help to solve this issue. Add marginThreshold: null (and potentially scrollLock: false to MenuProps of the Select to make it open always below the input. See https://codesandbox.io/s/pensive-clarke-pnj8vv?file=/demo.js

Does this help?

[naorunaoru]

@michaldudak Hi, I'm picking up where @raccmonteiro left.

I've reproduced an issue that arises if you add marginThreshold: null to MenuProps: https://codesandbox.io/s/adoring-ganguly-hxw47c?file=/demo.js

The Popover's height is fixed at calc(100% - 32px), as described here, but it's not quite correct when the Select itself is offset from the top of the page: the popover is partially out of the page. You can exaggerate this issue by changing marginTop on the Box that contains the Select.

Edit: on the second thought, it might not be the Popover, but MenuPaper, so I've updated my sandbox with a solution that overrides maxHeight on MenuPaper.

I haven't found a generic enough solution for that yet, but maybe you could suggest something?

Edit 2: I've introduced a stupid-enough-but-kinda-works solution to the sandbox, it requires calling getBoundingClientRect on Select's element and getting its offset to use in MenuPaper's maxHeight calculation.

[stouch]

We've recently merged in #37773, which could help to solve this issue. Add marginThreshold: null (and potentially scrollLock: false to MenuProps of the Select to make it open always below the input. See https://codesandbox.io/s/pensive-clarke-pnj8vv?file=/demo.js

Does this help?

This worked for me.

It would be great if we could "auto" position popover depending on media/window size.

[stouch]

There actually are many cases in which we want to position automatically a popin around your text fields (/ and/or resize it automatically) depending on how much you are scrolled on the page or the window size. I'm not sure why Popover has not an option to auto position / auto placement the popover where there is enough space on the screen around the anchor, it looks very obvious in many libs but there maybe a specific reason ? (this is an example vue lib but there are dozens of them: https://bootstrap-vue.org/docs/components/popover with placement: auto)

[seemX17]

Are we planning to fix this issue anytime soon? Is there a workaround for this?