Dynamic menu height calculation is incorrect when rendered within a scrollable parent

[matt-d-rat]

Are you reporting a bug or runtime error?

• Type: Bug
• Tested react-select versions: v4.0.2, v3.1.0
• Tested react version: 17.0.1, 16.12.0
• Code sandbox demo: Demo (see notes regarding OS scrollbars below)

Description

When the Select component is rendered within a scrollable parent element (overflow-y: auto) in such a way that when the menu is opened its natural height would be greater the available space below the control, the resulting calculated height of the menu is incorrect.

This causes the browser to overflow the parent and render scrollbars, resulting in "double scrollbars" (one for the menu list and one from the scrollable parent), which looks really ugly.

As you can see from the screenshot above, it appears that the height of the menu doesn't seem to correctly factor in the marginTop and marginBottom of the menu based on how much additional space is required – though this may just be a coincidence as I can see that the code responsible for the calculation does attempt to account for these numbers:

https://github.com/JedWatson/react-select/blob/7532d4d5f413456c232dc9b7ab8fa0df4f3c6785/packages/react-select/src/components/Menu.js#L68-L87

Perhaps the padding on the scrollable parent is the cause? Also not sure, just throwing some ideas out there.

Notes

This is predominantly an issue on operating systems that always render the scrollbars. This is not the default behaviour on macOS, so in order to be able to see the reported issue you'll need to enable this behaviour via: System Preferences > General > Show scroll bars: Always

[tomhollander]

Thanks @matt-d-rat, great repro. Here's how it renders on Windows.

[pashata]

this seems like it's still an issue ... :confused: