Left Click Menu Is Being Placed Above Top of screen for menus with many items

[wsimon]

Describe the bug
We have a long menu that gets placed above the top of the screen so that the items at the top are not clickable. This is the menu that I am referring to:
https://github.com/VirtoCommerce/vc-platform/blob/dev/src/VirtoCommerce.Platform.Web/wwwroot/js/common/directives/left-click-menu.js

Steps to reproduce
Steps to reproduce the behavior:

1. For any place where that left-click-menu is being used, configure the items in it to have a lot and/or shrink your screen/window down.
2. Click to open the menu
3. The top of the menu is above the top of the screen/window so that the top menu items are not selectable.

Expected behavior
I would expect the menu to become scrollable if it doesn't fit and not go off screen

Version info (please complete the following information):

• Browser version: latest Chrome on desktop Version 117.0.5938.132
• Platform version: 3.316.0

[mvktsk]

Task https://virtocommerce.atlassian.net/browse/VP-8454 has been created

[OlegoO]

@wsimon Could you attach any screenshots or gif?

[wsimon]

Yeah so for example, in this screenshot we have a long alphabetized list in the menu. It is long enough, it goes under the header and the top items that start with A-C are not selectable.

[OlegoO]

Added PR: #2713

[Dan-BV]

Hi, @wsimon !

Release https://github.com/VirtoCommerce/vc-platform/releases/tag/3.428.0

https://github.com/VirtoCommerce/vc-platform/releases/tag/3.414.7

https://github.com/VirtoCommerce/vc-platform/releases/tag/3.293.20

[wsimon]

Hi thanks for the quick work. But it seems there is an issue with the fix- it seems to break the submenu. Hovering over profile or location should pop out the submenu to the right. It is now behind the top menu.

[OlegoO]

Thank you for feedback

[OlegoO]

@wsimon please check VirtoCommerce/vc-module-core#219

[wsimon]

@OlegoO That works for us. Thanks.

[OlegoO]

We are planning to release it in Monday

[OlegoO]

Fixed in https://github.com/VirtoCommerce/vc-module-core/releases/tag/3.404.0

and delivered in two latest stable releases:
https://github.com/VirtoCommerce/vc-module-core/releases/tag/3.400.2
https://github.com/VirtoCommerce/vc-module-core/releases/tag/3.211.2

[wsimon]

Hi @OlegoO . We tried updating to the latest release and we are still seeing the original issue even though the menu has a scrollbar. We click this select attribute link and the menu opens but the top of it is off screen and now it doesn't open next to the link where we click but further up on the screen.

I wonder if this javascript is going to have to change, because this is where it calculates what to set the top property of the menu. At the very least, it should probably do a Math.max(0, top) but it might need more to take into account that the height of the menu is no longer greater than 70% of the viewport height so that it is properly aligned with the element that opened it:
https://github.com/VirtoCommerce/vc-platform/blob/dev/src/VirtoCommerce.Platform.Web/wwwroot/js/common/directives/left-click-menu.js#L53

[Dan-BV]

Hi, @wsimon !
Could you please answer a few clarifying questions:

1. How many items does your menu contain?
2. What screen resolution are you testing on?
3. Could you provide temporary access to your environment for testing?

[wsimon]

@Dan-BV Thanks for your help.

1. There are 44 items in the menu
2. 1366 x 768
3. I can't as it is only accessible on our internal network