Wrong menu position when used in shadow dom

[mkampmey]

Hello!
I am using different react components from different component libraries and react-select is the only one which does not fully work in web components with shadow dom enabled. In my case the menu of react-select has a wrong position. I tried similar components of other libraries that also render a menu, but I did not have any problems with them. So I guess that the calculation of the position of the menu is a bit buggy, especially when used in web components. Or maybe I am missing some property which could solve my issue.

You can check my code here: https://codesandbox.io/s/react-select-with-shadow-dom-and-menuportaltarget-n03fe?file=/src/ReactSelectElement.js

So is this a bug or is there some way I could fix my issue?

[Rall3n]

Hello @mkampmey,

menu-positioning is an active issue we discovered with the component, which we are actively working on.

There are two solutions at this point in time which would help fix the issue at your end.

1. You could remove the menuPortalTarget prop. I don't really see the need for it based on your example.
2. If you need menuPortalTarget you could alternatively set the prop menuPosition='fixed'. This will render the menu with a fixed position.

[dlwsacrez]

@Rall3n I tried the second solution, in my own project but also in the example of the author, neither worked.
What else could be done?

Thnx in advance!

[LPsyCongroo]

Hi, is there any progress on fixing this issue? We're having the same problem and it's a major blocker. Happy to help contribute a fix but I could use some help understanding how the menu dropdown is currently placed.