Allow submenus to be positioned

[tgreenwatts]

Currently if a menu is at the bottom of the screen and has a submenu that extends past the screen, you can never click on the submenu because it expands the screen size, closes, reopens, and bounces back and forth

If submenus were able to position to the top instead of the bottom this would not happen

[llorca]

We need smart submenus. Right now, they're either shown or hidden via CSS only, which gives us no control on positioning

[giladgray]

@llorca not true about CSS only, we have "smart" submenus that flip from side to side based on screen space thanks to @cyu06 all those months ago. they also use Popover internally but popover/tether does not really support this kind of smart positioning out-of-the-box.

[llorca]

@giladgray Gotcha! Since submenus use Popover internally, can we simply turn on the "pin to window" option?

[tgreenwatts]

I'm not clear on the status here - is this an easy fix, something an app can do today, or still a further out thing?

[giladgray]

decidedly not an easy fix because submenus are inline so they don't use Tether, meaning constraints are ignored.

[dcervelli]

I have a very hacky, not particularly well tested (haven't tried sub-sub-menus), "solution" that we'll use so that we can move forward. This replaces https://github.com/palantir/blueprint/blob/master/packages/core/src/components/menu/menuItem.tsx#L133:

        <Popover
          content={submenuElement}
          isDisabled={disabled}
          enforceFocus={false}
          hoverCloseDelay={200}
          tetherOptions={{
            constraints: [
              {
                to: 'window',
                attachment: 'together',
                pin: true
              }
            ]
          }}
          inline={false}
          interactionKind={PopoverInteractionKind.HOVER}
          position={this.state.alignLeft ? Position.LEFT_TOP : Position.RIGHT_TOP}
          popoverClassName={classNames(Classes.MINIMAL, Classes.MENU_SUBMENU, popoverClasses)}
          useSmartArrowPositioning={false}
        >
          {content}
        </Popover>

The changed props are inline, tetherOptions, and hoverCloseDelay. The last one was a cheap fix to an issue where the menu would close as the mouse passed between the parent MenuItem and the submenu. It turns out to have a nice UX though: you sort of get an 'Amazon Triangle' effect with no effort (at least with only one submenu).