react-select does not scroll into view selected option when `menuPortalTarget={document.body}`

[mrudowski]

react-select does not scroll into view selected option when we use menuPortalTarget={document.body}

In docs example: https://react-select.com/advanced#portaling

Or please check this codesandbox: https://codesandbox.io/s/codesandboxer-example-forked-c5xp8p?file=/example.tsx

[tdambra]

When will this change be live?

[jgwiazdowski]

still no solution?

[konradekk]

A workaround: find the focused option HTML element in the document tree and scrollIntoView on it after the render.

Little bit more precisely: use setTimeout to getElementById or first from getElementsByClassName (whichever suits you better) and apply scrollIntoView on it, with e.g. { behavior: "smooth", block: "center", inline: "start" }.

[Cosmitar]

I tried @konradekk's workaround and even when it works it also adds some unexpected behavior when the menu is hovered (the scroll jumps one option). Since I was using custom options I decided to fix it inspired by #2112 Using the innerRef prop of the Option component and a scrollIntoView inside a useEffect hook when option is selected.