React-select: Menu does not follow component when scrolling

[matiosfree]

Hey guys. I found the issue when I'm adding these 2 props:
menuPosition="fixed" portalPlacement="auto"

Then I open the menu and start scrolling the main scroll (not the menu scroll).
The menu stays in the same place.
Ex.: https://codesandbox.io/s/react-codesandboxer-example-39q8c

I expect the menu to follow the main component.

PS. I'm using this Sekect in material-ui Dialog with long item list, that's why I need menuPosition="fixed" prop.

[benkindt]

Yes, this is buggy. The position is calculated only when hovering the dropdown again.
Related to #3349 & #3313

[benkindt]

A workaround for this is to block scrolling with menuShouldBlockScroll={true}

[samthomson]

@matiosfree Out of interest, why do you need a fixed position?
Asking as I just solved this by changing from fixed to absolute, and can't see any other difference (hoping I amen't breaking anything..).

[ranihorev]

@benkindt menuShouldBlockScroll={true} also blocks scrolling within the menu :(

[srinivasmerugu]

@benkindt As @ranihorev pointed the workaround provided by you menuShouldBlockScroll={true} blocks scrolling within the menu.

Mostly, we are using react-select with portals ( menuPortalTarget={document.body}) on modals and slideIns.

Could you please let us know in which version of react-select the bug #3734 is going to resolve.

[benkindt]

@srinivasmerugu I'm not sure if I just wasn't aware of the mentioned issue or this once worked in an older version.

[srinivasmerugu]

@benkindt this issue is happening only when we use menuPortalTarget={document.body} on modals/slidens in order to have the portals inside react-select.

Without portals in older/newer versions its just works fine on modals /slideins.

[srinivasmerugu]

@srinivasmerugu I'm not sure if I just wasn't aware of the mentioned issue or this once worked in an older version.

Hey @benkindt Can you please let me know if this is going to include in next release as we would like to use the portaling inside the modals/slideIns without any scrolling issues.

Thanks in Advance!

[acidmk]

We also want to deal with this issue. Menu dropdown is producing scroll inside of modal dialog so we are setting menuPosition="fixed" to bypass dialog body overflow. But in this mode dropdown won't follow the input.

[benkindt]

@srinivasmerugu I don't know if this will be fixed in a future release.
Like I said: I wasn't aware of the menuShouldBlockScroll-behaviour and my workaround doesn't seem to really solve the problem. It's still buggy for me too.

[acidmk]

@benkindt the workaround is good but it blocks menu scroll

[benkindt]

@srinivasmerugu Good news. I found this comment, which mentions that there was a bug introduced in v3.0.5. I tested it and the workaround is working in version 3.0.4.

A workaround for this is to block scrolling with menuShouldBlockScroll={true}
*with "react-select": "3.0.4",

[srinivasmerugu]

@srinivasmerugu Good news. I found this comment, which mentions that there was a bug introduced in v3.0.5. I tested it and the workaround is working in version 3.0.4.

A workaround for this is to block scrolling with menuShouldBlockScroll={true}
*with "react-select": "3.0.4",

@benkindt We are using 3.1.0 version and its latest features .Could you please let me know if there is any plan of reverting the code which caused this issue.

[benkindt]

@srinivasmerugu you can follow the link to the mentioned comment. This thread is about the scrolling bug in particular, you may ask it there. I'm using v3.0.4 as long as there is no progress

[srinivasmerugu]

@srinivasmerugu you can follow the link to the mentioned comment. This thread is about the scrolling bug in particular, you may ask it there. I'm using v3.0.4 as long as there is no progress

yeah @benkindt I just posted at https://github.com/JedWatson/react-select/issues/3929

[bladey]

Hello -

Thanks for reporting this issue.

This bug has been reported multiple times as per issue #4088.

A new master issue #4088 has since been created to keep track this this bug.

This new issue will exist as the source of truth going forward to investigate the issue, report findings, and implement a bug fix.

We'll take into account all the details above while investigating.

If you feel this issue has been wrongly closed as it isn't related to the new master issue #4088, please let us know and we'll take another look.

Thank you!