Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown menuPortalTarget props #4460

Open
Reavxn opened this issue Jan 11, 2024 · 3 comments
Open

Dropdown menuPortalTarget props #4460

Reavxn opened this issue Jan 11, 2024 · 3 comments

Comments

@Reavxn
Copy link

Reavxn commented Jan 11, 2024

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.

Copy link

welcome bot commented Jan 11, 2024

👋 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
Copy link
Author

Reavxn commented Feb 27, 2024

No comments ?

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

@yuan9090
Copy link

I need this, any update ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants