search

Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.19k stars 4.04k forks source link

Dropdown menuPortalTarget props #4460

Open Reavxn opened 6 months ago

Reavxn commented 6 months ago

Feature Request (more like need more infos to make PR)

Problem description

When a dropdown is used within a parent, which has a scroll, the dropdown's menu interaction is weird. Due to how its done, the menu is rendered within the dropdown DOM, implying the user has to scroll the parent's scroll to access lower options. In cases where parent can't have an overflow, it's close to not ideal, but very near to unusable... If the parent's height is not enough, no matter what, it won't be correctly displayed.

Proposed solution

Basically a menuPortalTarget props. When set, the menu is rendered in the given DOM element (like document.body).

I've looked in some others libraries and that's what they propose most often of the time.

So I've done it. The code is ready, I just finished it. So far I don't see many more problems that those I saw. Menu is adapting its position if not enough space below (upward feature)... Menu is resizing correctly to fit the dropdown no matter what... Etc... Added code is somewhat not so big in my opinion...

Quick teaser, left is default, right is with menuPortalTarget={document.body} props : image

Also goes around the scrolling modal content limitation : image

Before sharing and making the pull request, I'd like to polish it a bit and ask if anyone has any concerns about it, or something that could go wrong with it, or you never did it on purpose because it would break something on your side, or.... anything ! So I can check in my end and fix if needed.

One thing I had to do though, implement another props "closeOnScroll" (based on other closeOnXXX props), and force it to "true" (in a way) when menuPortalTarget is set, so the menu closes when a scroll event is detected (via EventStack for now, until you remove it in v3). Because I couldn't sync the menu's position with nested scrolls within the parents :(

Also I'm trying to do some unit tests if possible.

First time I'm trying to participate to someone's else repository tho, so be kind to me 🤣 Still, don't hesitate if I'm doing wrong, tell me.

welcome[bot] commented 6 months ago

👋 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.

Reavxn commented 4 months ago

No comments ?

I'll make PR end of March then, I guess

yuan9090 commented 2 months ago

I need this, any update ?