React-select: Can't scroll when using react-select and react-window

Created on 22 Oct 2019 · 5Comments · Source: JedWatson/react-select

Hello, friends!

First, let me say thank you for react-select. It's great, I use it a bunch, I love it. It's made our Select components much more elegant.

However! I have noticed something weird happening to me somewhere between 3.0.4 and 3.0.8. I'm using react-window to render a long, scrolling list, and unfortunately the list doesn't want to scroll in 3.0.5+, whereas it scrolls fine in 3.0.4. I played around with the CSS, assuming it was CSS-related, but that didn't help.

Here are some simple test cases:

3.0.4 (Scrolls):
https://codesandbox.io/s/lively-glitter-ix1rs

3.0.5 (Doesn't scroll):
https://codesandbox.io/s/divine-shadow-fqli5

I _think_ that #2861 caused this behaviour to change - I'm going to do more testing to see whether I can verify this.

I know this is not the standard use-case, but I've been using these two libraries together and I really like the combination, so I'm hoping there's some kind of easy work-around or ref I can use for this.

issubug-unconfirmed issureviewed

Source

elliottkember

👍5

Most helpful comment

It seems like this change now forces the first child of the MenuList component to be the scrolling component. Which breaks compatibility with a couple of libraries (see #780).
I don't think this was intended for a patch release...

Grsmto on 27 Oct 2019

👍8

All 5 comments

Update: I have figured out a workaround! Here's what happened:

The problem:

I was using the MenuList component as both the menu list, and my custom header. This worked great until the code started to refer to the child element as the scrollable element, and was nice because all my customizations were in one place. But I was doomed.

The solution:

Build a separate Menu component, put the header component there, and have the List from react-window as the only child for the MenuList component. Then get rid of the components.MenuList component inside the custom MenuList component.

The end result is an improvement, and quite a clean separation of concerns. Anyway, I hope this helps someone else who did what I did.

elliottkember on 22 Oct 2019

👍7 👎1

Grsmto on 27 Oct 2019

👍8

Could we get an actual patch for this? Its been months and this is breaks old functionality. It would be much appreciated

mitchellwarr on 29 Jan 2020

👍4

Hey guys I also experienced this problem. I found a fix, based on react-window-select. Essentially you have to pass your innerRef from selectProps as outerRef to your VariableSizeList.

Here's the code that helped me out.

Hope this helps!

nicholaai on 9 Apr 2020

I ran into this issue as-well with react-select and react-virtualized. In my case it would be nice for this to be fixed because if I try to wrap the menuList in an AutoSizer HOC to make the virtualized dropdown have a dynamic width, then it will not scroll properly. Removing the AutoSizer makes scrolling work again, but then the width has to be set to a fixed number.

Currently I downgraded to 3.0.4 to fix.