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

Submenu shows off screen #203

Closed
BrainCrumbz opened this issue Jan 20, 2022 · 5 comments
Closed

Submenu shows off screen #203

BrainCrumbz opened this issue Jan 20, 2022 · 5 comments

Comments

@BrainCrumbz
Copy link

BrainCrumbz commented Jan 20, 2022

Do you want to request a feature or report a bug?
Bug (at least it seems so)

What is the current behavior?
There seems to be 2 scenarios:

  1. When 1st level menu initial position is so close to the the right side that its 1st level items would go off the screen
  2. When 1st level menu is far enough from the right side to correctly show its 1st level items

In scenario 1. , react-contexify correctly adjusts the actual menu position so that its 1st level items stays in the screen. In this case, a 2nd level submenu shows its items on the left and everything is fine.

In scenario 2., react-contexify does no adjusting of initial position. In this case, a 2nd level submenu shows its items to the right, and they go off screen. This happens also if menu starts showing e.g. at the center of the screen and there are enough submenus to reach to the right side.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your CodeSandbox (https://codesandbox.io/s/new) example below:

This codesandbox shows the issue: https://codesandbox.io/s/react-contexify-sample-rrc34.

  1. Click on top golden text and open until 3rd-level submenu: last submenu items go off screen
  2. Click in blue text on "Or" and 2nd level submenu opens to the right, its items go off screen
  3. Click in blue text on "well" and 2nd level submenu opens to the left, so all is fine.
    Actually, fine until you reach the left side by subsequent submenus.

What is the expected behavior?
One behaviour could be that the submenu should open to the left when its items cannot be shown to the right.
Another behaviour could be that the submenu opened to the right would cause a content overflow, so that scroll bar can appear if parent container has its overflow-y set correctly.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react 17.0.2

Browsers: Chrome, Firefox. Both on Windows. Did not check others.

@dlwsacrez
Copy link

following

@ttay24
Copy link

ttay24 commented Mar 30, 2022

Hi, I also just ran into this issue.

To give more context for me, it works if I am at the bottom of my div and do not have a context menu open. However, if there's one open (for the same menu, multiple "rows"), and I right click again towards the bottom, it does not adjust automatically and shows off screen

@geroale
Copy link

geroale commented Jul 7, 2022

Same issue here

@fkhadra
Copy link
Owner

fkhadra commented Nov 5, 2022

Hey @BrainCrumbz, I'm working on the next major release(finally). Thanks a lot for providing a reproduction, it saved me a lot of time

Screen.Recording.2022-11-05.at.14.01.28.mov

fkhadra added a commit that referenced this issue Nov 5, 2022
@BrainCrumbz
Copy link
Author

Thanks to you for your time

@fkhadra fkhadra closed this as completed Nov 13, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants