react-select: menuShouldBlockScroll also blocks menu scrolling.

Hi, I’m using menuPortalTarget to render outside of containers with overflow hidden such as table rows. In order for the menu position to be correct I have to set menuPosition to fixed. This works great except when you scroll the page and the menu position is not recalculated. To fix this I then use menuShouldBlockScroll which in combination with the other props achieves the desired result except for the fact that menuShouldBlockScroll also blocks the menu (has max-height with scroll auto) contents from being scrollable.

Would it be possible to prevent scrolling for all elements except for .react-select__menu-list ?

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

Ugh… I was following this issue and #4088 for over one-two months already 😅
Didn’t notice a fix has published for it three days ago 😁

For book-keeping purposes, this issue is “solved” in v4 😍 ✌️
Thanks, @Methuselah96 ✌️

eddiecooro on Feb 9, 2021

Hey @2Steaks thanks for the codesandbox I can see it now. I’ll get to it sometime soon. I’ll update here once we make progress.

flexdinesh on Mar 31, 2020

I am experiencing this issue at v4.3.0 😦

The next config sometimes blocks menu scrolling:

menuPortalTarget: document.body,
menuPosition: 'fixed',
menuShouldBlockScroll: true,
menuShouldScrollIntoView: true,

UPD: I were using custom component for MenuList without components.MenuList - that was the reason.

iksent on Jul 12, 2021

Good shout @flexdinesh, here you go: https://codesandbox.io/s/festive-dirac-izf5y?fontsize=14&hidenavigation=1&theme=dark

2Steaks on Feb 28, 2020

Hi @JedWatson can you give any more insights into this? This is a big bummer 😦

stnwk on Mar 30, 2020