fix: teleport dropdown to body to avoid clipping in scrollable contai…

[Amirkian2023]

This is a cleaner version of previous PR #1902 with only scoped changes.

Fixes dropdown clipping when used inside scrollable containers (like tables or modals) by teleporting dropdown to body and positioning it with getBoundingClientRect().

[Amirkian2023]

Hi!
This PR (#1903) contains the cleaned-up changes from #1902 as requested.
Please let me know if any further adjustments are needed.
Thanks!

[lehni]

Would've been nice to make this an option. The old way worked perfectly for us, we don't need it teleported anywhere, but now we need to rewrite all the e2e tests to make this change work again. How is this a minor release?

[oliversanders]

@Amirkian2023 have you considered following this approach to solve your original problem: https://guissmo.com/blog/bypassing-overflow-hidden-rule-in-css/ I don’t believe portal is strictly necessary here, and the positioning really should track the input’s size and container scroll position, as those can and will change whilst the dropdown is open.

Having a high style fixed z-index also presents ordering issues with other components, feels it should be handled differently, or customisable.

With the content wrapper now elsewhere in the DOM in relation to the input, I feel there is also a missing prop for adding classes specific to the popup’s content wrapper.

The teleport at least should have a prop to enact its disabled state, which will override it for those who don’t need it.