Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Submenu shows off screen

See original GitHub issue

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:

When 1st level menu initial position is so close to the the right side that its 1st level items would go off the screen
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.

Click on top golden text and open until 3rd-level submenu: last submenu items go off screen
Click in blue text on "Or" and 2nd level submenu opens to the right, its items go off screen
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.