React-select: menuPlacement="auto" does not respect maxMenuHeight property

Created on 16 Dec 2018 · 11Comments · Source: JedWatson/react-select

When menuPlacement="auto" is set and the menu is flipped (moved to the top of the select) the maxMenuHeight property is not respected and the menu is huge.

Here is a sandbox with the issue
https://codesandbox.io/s/o7mrlm6z15

issubug-unconfirmed

Source

luiz290788

Most helpful comment

Strange. It works for me and I use both menu portal and menu placement auto. Eg.

const menuPortalTarget = document.getElementById('root');
<Select
          maxMenuHeight={220}
          menuPlacement="auto"
          menuPortalTarget={menuPortalTarget}
/>

@dep if you still have the max-height property I think you should remove it. At least for me it was causing some flickerish effect when the dropdown was at the bottom of the page (that happened with the previous version though).

Mihaela-Mac on 11 Feb 2019

🎉2

All 11 comments

I found this pull request that probably solves the issue.
https://github.com/JedWatson/react-select/pull/3205

luiz290788 on 17 Dec 2018

@luiz290788 That got merged, but installing the module with either npm install react-select or npm install react-select@latest does not bring the changes from that PR. Did you have any luck with this?

Mihaela-Mac on 10 Jan 2019

This still appears to be an issue for me on 2.2.0

dep on 16 Jan 2019

👍1

Yes, for me too. Looks like the latest release on npm was https://www.npmjs.com/package/react-select 19 days ago at the moment, but the PR https://github.com/JedWatson/react-select/pull/3205 was merged 13 days ago, so the changes are not in on npm. Would be great if they would make a new release with the fix. 🤔

Mihaela-Mac on 16 Jan 2019

In the meantime you can give a max-height to the menu-list via CSS

dep on 16 Jan 2019

👍1

@dep a new version has been published: 2.3.0. Updating has fixed the issue for me.

Mihaela-Mac on 18 Jan 2019

👍1

I'm still seeing this issue with 2.3.0 when using a menu portal

matthova on 8 Feb 2019

I am also still seeing the issue. menuPlacement="auto" does not appear to respect the maxMenuHeight property.

dep on 11 Feb 2019

Strange. It works for me and I use both menu portal and menu placement auto. Eg.

const menuPortalTarget = document.getElementById('root');
<Select
          maxMenuHeight={220}
          menuPlacement="auto"
          menuPortalTarget={menuPortalTarget}
/>

Mihaela-Mac on 11 Feb 2019

🎉2

When menuPlacement="auto" is set and the menu is flipped (moved to the top of the select) the maxMenuHeight property is not respected and the menu is huge.

Here is a sandbox with the issue
https://codesandbox.io/s/o7mrlm6z15

the code sandbox worked for me!

noraboamaah on 30 Oct 2019

Hi all,

Thank you everyone who had a part in addressing this question!
I'm now closing this issue as it appears to have been resolved via community comments.

However, if you feel this issue is still relevant and you'd like us to review it, or have any suggestions regarding this going forward - please leave a comment and we'll do our best to get back to you!