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

Predictable handling of edge cases when exact calculated location is not possible #352

Open
rzinnatullin opened this issue May 27, 2024 · 0 comments

Comments

@rzinnatullin
Copy link

rzinnatullin commented May 27, 2024

When user clicks on a trigger, the popup appears near to the trigger element.
There is a limited number of locations where the popup can appear: bottom left, top center, and etc. (13 positions in total).
However, when popup contents are too big to be placed in any of these positions, reactjs-popup simply defaults to some top right position.
image
In the screenshot above there's a lot of space to fit most (not 100%) of the popup content on the page. However, reactjs-popup descides to place the popup the way it's unusable even though there's way more space under the trigger element at least to try to fit the popup.
image
The most expected way would be to ignore vertical part of the requested positioning and just place it vertically to show as much of the content as possible. The same with horizontal positioning. If popup doesn't fit on the screen on both dimensions - who cares where the trigger is located, right? Just show as much of the content as possible, and don't worry about obscuring the trigger element - it doesn't matter when popup doesn't fully fit.

Even though these are the edge cases, they should behave the way users would expect.
If there's no solution that would fit everyone, maybe it makes sense to allow position customization? If there was a callback with the position calculation results, I could adjust the results in my handler.

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

1 participant