Semantic UI react v 2.0/ Dropdown AppenTo bug (Priority: Urgent)

[goodidea0829]

Bug Report (Priority: Urgent)

Description

The dropdown menu in Semantic UI React does not append to the body element. Instead, it relies on its parent container. If the parent container has an overflow:auto or similar style applied, the dropdown content gets clipped within the parent’s scrollable area, as shown in the screenshot.

Steps

1. Add a dropdown component inside a parent container with a style like overflow: auto; height: Xpx;.
2. Open the dropdown.
3. Observe that the dropdown menu is clipped within the parent container instead of overflowing properly.

Expected Result

The dropdown menu should provide an option (e.g., appendToBody: true) to render itself outside the parent container, directly under the body element. This would ensure that dropdown content is not constrained by the overflow style of the parent container.

Actual Result

The dropdown content is restricted within the parent container with overflow-auto applied, causing it to be clipped and inaccessible if the parent container has scrollbars.

Version

"semantic-ui-react": "^2.1.4"

Additional Notes

• This issue could potentially be resolved by introducing a property similar to appendToBody: true for dropdown components, which renders the dropdown menu outside of the parent container in the DOM hierarchy.
• I couldn't find any reference to such a property in the official Semantic UI React documentation.

[welcome]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.