InputPicker is moving along with the Scroll

[quimeyruffa]

What version of rsuite are you using?

5.40.0

What version of React are you using?

18.0.0

What version of TypeScript are you using (if any)?

5.1.6

What browser are you using?

Chrome

Describe the Bug

InputPicker Menu is moving up and down along with the Scroll

Expected Behavior

InputPicker menu should stay relative to its toggle wrapper.

To Reproduce

No response

[simonguo]

Refer to this reply: #1498 (comment)

[yurifw]

The same problem is happening with TagPicker, is this the intended behavior? The solution you linked didn't work for me, I think it's because I am rendering it inside an Accordion in a loop, so my reference is throwing an error:

Unexpected Application Error!
Target container is not a DOM element.

Could you help me set the reference please? Here is how I'm doing it:

export default function Page() {
	const [groups, setGroups] = useState([])  //groups are populated elsewhere
	const scrollContainers = useRef([]); 

	const renderGroups = () => {
		scrollContainers.current = groups.map((element, i) => scrollContainers.current[i] ?? createRef())

		return groups.map((group, i) => {
			<Accordion>
				<Accordion.Panel header={"Tags"} src={scrollContainers.current[i]}>

					<TagPicker creatable 
						container={()=>scrollContainers.current[i]}  //this line throws the error
						data={suggestedTags} 
						style={{ width: '100%' }} 
						value={group.allowedTags} 
						onSelect={onTagSelected}
					/>

				</Accordion.Panel>
			</Accordion>
		})
	}

}

Edit: Never mind, I managed to fix, thanks for that link, I'll leave my changes here in case it helps someone. Still think that's a weird default behavior, but it's working now

export default function Page() {
	const [groups, setGroups] = useState([])  //groups are populated elsewhere
	const scrollContainers = [];

	const renderGroups = () => {

		return groups.map((group, i) => {
			scrollContainers.push(createRef())
			<Accordion>
				<Accordion.Panel header={"Tags"} ref={scrollContainers[i]}>

					<TagPicker creatable 
						container={()=>scrollContainers[i].current}
						data={suggestedTags} 
						style={{ width: '100%' }} 
						value={group.allowedTags} 
						onSelect={onTagSelected}
					/>

				</Accordion.Panel>
			</Accordion>
		})
	}

}