SelectPicker is moving along with the Scroll

[barmola]

What version of rsuite are you using?

4.8.8

What version of React are you using?

17.0.1

What browser are you using?

Chrome, Firefox

Describe the Bug

SelectPicker Menu is moving up and down along with the Scroll

, Behaving like position:fixed

Expected Behavior

SelectPicker menu should stay relative to its toggle wrapper.

To Reproduce

[simonguo]

You can set a container prop for SelectPicker. Assigned to the scroll container.
The Menu will be rendered into the container.

<div src={containerRef}>
  <SelectPicker container={()=>containerRef.current}/>
</div>

[mykhailo-space44]

Have the same issue on "rsuite": "5.6.0"

[SevenOutman]

Hi @barmola, I'm closing this issue as it seems to have been resolved. Feel free to re-open if it's actually not.

[OrnellaSofia]

Just as a comment, the parent div should have position: relative set. I had been running into this issue and the solution didn't work until I added that.

[yurifw]

Hello, I'm sorry to resurrect this, but the suggested solution doesn't work when the picker is used to select multiple items, for instance, TagPicker or CheckPicker. It works until the user clicks the first item, then if he scrolls before clicking the second item, the container follows the scroll just like the second item. I guess that it has something to do with re-rendering, but I'm not sure. Can someone with this?

[simonguo]

Hi @yurifw .
Please fork this example to reproduce your issue.
https://stackblitz.com/edit/react-wsoi3i

[yurifw]

Thanks for helping!
Here's the fork: https://stackblitz.com/edit/react-wsoi3i-jdaqnx
I think it's related to setting a fixed height and overflow on children, but I'm not sure, kinda lost with this one...

[simonguo]

https://stackblitz.com/edit/react-wsoi3i-jdaqnx

You should use useRef instead of createRef to get the reference of the element. createRef will return a new reference every time it renders, while useRef will return a fixed reference.

-  const scrollContainer = createRef();
+  const scrollContainer = useRef();

[yurifw]

So much time trying to solve this... Thanks a lot, worked perfctly!