React-select: 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 - https://github.com/JedWatson/react-select/commit/691a01171969da89e20097f9d603651bb18a8510

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

Issues:

https://github.com/JedWatson/react-select/issues/4020
https://github.com/JedWatson/react-select/issues/4052
https://github.com/JedWatson/react-select/issues/3734
https://github.com/JedWatson/react-select/issues/4085
https://github.com/JedWatson/react-select/issues/3929
https://github.com/JedWatson/react-select/issues/3349
https://github.com/JedWatson/react-select/issues/3646

Examples:

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 https://github.com/JedWatson/react-select/issues/3929#issuecomment-604866966.

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: https://github.com/JedWatson/react-select/issues/810#issuecomment-398563946)

[srinivasmerugu]

Hi @bladey Could you please let us know if this would be prioritised and made available in next patch release please.

[bladey]

@srinivasmerugu we'll get to it as soon as we can, any updates will be provided here.

[mjb95]

Hi, has any progress been made on this issue?

[lohithvecham]

Hi, anyone has any update on this?
In my case, it's happening in the Chrome-75 version but not in 78 or 80 versions.

[HodayaGruz]

Hi, anyone has any update on this?
In my case, it's happening in the Chrome-75 version but not in 78 or 80 versions.

i see it happening in chrome 85.
when do you think it will fix?

[narojisivamurthi1230]

how much time it take to push this commit?

[Methuselah96]

I've started a fork of react-select. Feel free to resubmit this issue on the fork and/or submit a PR to resolve this issue on the fork and we can get it merged and released.

EDIT: :tada: I've archived the fork now that we've got some momentum in this repo and Jed is involved again. Sorry for the disturbance!

[colin-oos]

Are you guys changing the menuPortalTarget? I ran into this issue because I was using menuPortalTarget so the dropdown would display outside of my modal. I found out that the problem was because I was using document.body as my target but it was in fact my modal, not the body, that was scrolling. Using my modal as the target instead of document.body fixed the issue for me.

[MenachemICTBIT]

@colin-oos How do you target a specific element? I have a div that I want to use as my target, how would I reference it?

[qenibas]

Same issue here, got a lot of modals with height bigger than my screen (added overflow: scroll) - when do you think it'll be fixed?

[colin-oos]

@colin-oos How do you target a specific element? I have a div that I want to use as my target, how would I reference it?

You could use a React Ref or if you give your div an id then you can use javascript document.getElementById('my-divs-id') and pass that result into menuPortalTarget. If you use a react ref, I believe you'd need to pass this.myDivsRef.target into menuPortalTarget (I haven't actually tried with a react ref though)

[BlackNightFury]

@bladey How is it going? It's been very serious issue.....

[umanga907]

This is bad. No way i could out a way to fix this. Can someone help please.

[MenachemICTBIT]

Here's what I've been using. It's really hack-y and caused other problems, but it's the best I could do.

Because the position is fixed, if you need to scroll , the menu is pinned to the fixed position. The trick was to add an event listener that checks where the scroll occurs, and closes the menu if scrolling outside. The major problem this caused was, since it's used on a data table, the entire table rerenders every time you scroll, causing major stuttering. If your use case is more like a side menu, it might work.

I ended up using a different dropdown, in large part, because of this issue.

<Select isClearable value={value || ''} menuPortalTarget={document.body} menuPosition={'fixed'} // HACK: Specifying class name to force close dropdown. Issue with react-select libray (dropdown fixed position). // This CSS selector will almost certainly cause problems during deployment. closeMenuOnScroll={(e: any) => !e.target.classList.contains('css-4ljt47-MenuList')} options={suggestions} />