Blueprint: Submenu with many menu items are not correct calculated top position

[ae-draft]

Environment

• __Package version(s)__: @blueprintjs/[email protected]
• __Browser and OS versions__: Chrome 78.0.3904.108 Windows 10

https://codesandbox.io/s/gifted-snow-00f0h

Steps to reproduce

1. I just took an example from the official documentation
2. Added a lot of child items to a menu item called style
3. When I open a submenu in a menu item called a style, I see part of the submenu, the other part of the submenu is outside the window.

Actual behavior

Big submenu is outside the window.

Expected behavior

The submenu is positioned at the top of the container and have scrolling.

Possible solution

You can position the submenu on the top edge using the position: “auto-end” property, but in this case the submenu will also be outside the window, but at the bottom of it. I think it would be right to calculate the actual size of the container and not allow the submenu to be large, but to have scrolling instead.

[adidahiya]

You can work around this by using custom styles and popoverClassName: https://codesandbox.io/s/competent-mendeleev-5ot29

Maybe there is a more automated solution to this problem as you suggested... the MenuItem component would have to measure scrollheight when a submenu opens up and the available scroll container space... open to proposals / PRs

[IMHOJEONG]

How about using 'styled components'?

https://codesandbox.io/s/festive-cdn-or8xq

Can I get this issue to make PR?

[adidahiya]

@IMHOJEONG if you are suggesting to add a dependency on styled-components to solve this issue, then no, we are not going to do that in Blueprint. If you attempt to solve this issue then it should be done without any external dependencies.

[IMHOJEONG]

Oh, I see. I will try to find a way without dependencies.

[ae-draft]

You can partially solve the problem by scrolling. But, due to this solution, 2 problems appear:

1. Third-party addiction
2. Submenu 3 and subsequent levels will not work

https://codesandbox.io/s/nostalgic-microservice-zhtzg

I suppose that the best solution would be to create your own Scrollbars component inside the blueprint, and to implement the scrollbar recount when opening the following menu levels

[ae-draft]

I would like to contribute to solving this problem, but I can not run blueprint locally on my machine.
I work in Windows 10, and have an installed .net development stack and nodejs 12.13.1. But I get error MSB1025.
It looks like this https://github.com/palantir/blueprint/issues/3799

[IMHOJEONG]

How about this comment?

https://github.com/dotnet/corefx/issues/26966#issuecomment-367066252