menuPlacement="auto" does not respect maxMenuHeight property

[luiz290788]

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

[luiz290788]

I found this pull request that probably solves the issue.
#3205

[Mihaela-Mac]

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

[dep-deprecated]

This still appears to be an issue for me on 2.2.0

[Mihaela-Mac]

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 #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. 🤔

[dep-deprecated]

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

[Mihaela-Mac]

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

[matthova]

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

[dep-deprecated]

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

[Mihaela-Mac]

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

[noramens]

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!

[bladey]

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!

[amitava82]

This is still an issue.

[ebonow]

Thank you @amitava82
This is a known issue as there is several similar issues related to or duplicated by this behavior that will be prioritized following the ongoing TypeScript refactoring.