Repository navigation
Can't scroll when using react-select and react-window #3824
Description
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.
Activity
elliottkember commentedon Oct 22, 2019
Update: I have figured out a workaround! Here's what happened:
The problem:
I was using the
MenuListcomponent 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
Menucomponent, put the header component there, and have theListfromreact-windowas the only child for theMenuListcomponent. Then get rid of thecomponents.MenuListcomponent inside the customMenuListcomponent.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.
Grsmto commentedon Oct 27, 2019
It seems like this change now forces the first child of the
MenuListcomponent 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...
mitchellwarr commentedon Jan 29, 2020
Could we get an actual patch for this? Its been months and this is breaks old functionality. It would be much appreciated
nicholaai commentedon Apr 8, 2020
Hey guys I also experienced this problem. I found a fix, based on
react-window-select. Essentially you have to pass yourinnerReffromselectPropsasouterRefto yourVariableSizeList.Here's the code that helped me out.
Hope this helps!
spencerpauly-mobileaxept commentedon Jun 23, 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
menuListin 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.