Submenu shows off screen

[BrainCrumbz]

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]

following

[ttay24]

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]

Same issue here

[fkhadra]

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

https://user-images.githubusercontent.com/5574267/200121251-9b9c3c30-3328-40b0-8488-62e46e2ae45a.mov

[BrainCrumbz]

Thanks to you for your time