Dropdown remains fixed in place and doesn't scroll with parent container

[bladey]

This issue is a round-up of multiple past issues documenting the same bug. Feel free to check out the linked issues below for more information. This issue is the source of truth going forward to investigate the issue, report findings, and implement a bug fix.

Issue:

Dropdown remains fixed in place and doesn't scroll with parent container.

The commit responsible for this issue is located here - 691a011

Version v3.0.4 does not have this bug however the latest release v3.1.0 does.

Issues:

#4554
#4020
#4052
#3734
#4085
#3929
#3349
#3646

Examples:

https://codesandbox.io/s/react-select-v3-sandbox-forked-lgkms
https://codesandbox.io/s/compassionate-cookies-85j2n
https://codesandbox.io/s/react-select-v3-sandbox-kr5wf
https://codesandbox.io/s/festive-dirac-izf5y
https://codesandbox.io/s/react-codesandboxer-example-xy47y

If anyone would like to share any further information, please do so.

[mjb95]

Hi - for info, I have explicitly tested this by installing v3.0.4 and v3.0.3, and I experience the same issue in both versions. Is it possible that the bug existed even before the commit that you have highlighted above?

[palashkaria]

I think @mjb95 is right, as this is the behaviour of React Select in v2 also; menuPosition fixed & portal, both do not update the positioning of the Menu on scroll - so the menu is stuck. All the sanboxes here have menuPosition fixed, and portal, and nothing related to it was changed in that commit.

The bug mentioned by @bladey is related to a workaround (menuShouldBlockScroll) to handle the issue of the menu not scrolling - as mentioned in this comment #3929 (comment).

This sandbox demonstrates that bug it better: on opening the menu, the scroll stops working completely.
https://codesandbox.io/s/elegant-sky-51tlo?file=/src/App.js

@bladey I suggest we separate these issues, as menuShouldBlockScroll is a completely separate issue, would not be fix this problem (& it should be done anyway).

This would only be solved if something like tether.js is pulled into the lib (which has been proposed before) #810 is directly related to this (and all others, except #3929), & has most of the problems/solutions related in one place - and IMO it is still not resolved. (see a hacky solution in this comment, which extends the Select class and uses react-tether + react-dimensions: #810 (comment))