react-select: Menu does not follow component when scrolling

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.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 5
  • Comments: 16 (1 by maintainers)

Most upvoted comments

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

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

@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.

@benkindt the workaround is good but it blocks menu scroll

@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!

@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.

@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…).