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 #3799

[IMHOJEONG]

How about this comment?

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

[rubenlg]

In case it helps others landing here, my hacky workaround is to create submenus manually (as opposed to just nesting MenuItem), and specify a safe max-height plus scrolling on CSS. This is a very simplified version of my code:

export interface PopoverMenuEntry {
    readonly label: string;
    readonly children?: PopoverMenuEntry[];
}

interface PopoverMenuProps {
    readonly entries: readonly PopoverMenuEntry[];
}
export const PopoverMenu = React.memo(function PopoverMenu(props: PopoverMenuProps) {
    return (
        <Menu style={{ maxHeight: 'calc(100vh - 64px)', overflow: 'auto' }}>
            {props.entries.map(renderPopoverMenuEntry)}
        </Menu>
    )
});

function renderPopoverMenuEntry(item: PopoverMenuEntry) {
    return <MenuItem
        text={item.label}
        key={item.label}
        children={item.children ?
            <PopoverMenu entries={item.children} /> :
            undefined} />;
}

In my app, that safe margin of 64px is enough. Without that, blueprint keeps a padding on the bottom of the page which makes the first element in the menu go offscreen.