palantir/blueprint

Submenu with many menu items are not correct calculated top position

Open

#3,871 opened on Nov 29, 2019

View on GitHub
 (8 comments) (2 reactions) (0 assignees)TypeScript (2,167 forks)batch import
P3Package: coreType: enhancementhelp wanted

Repository metrics

Stars
 (20,263 stars)
PR merge metrics
 (Avg merge 24d 18h) (17 merged PRs in 30d)

Description

Environment

  • Package version(s): @blueprintjs/core@3.22.0
  • 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.

Contributor guide

Research direction
Investigate the submenu positioning in @blueprintjs/core. Look at the Menu and MenuItem component source code, especially the calculation of submenu offset. Consider using a library like Popper.js to handle overflow. Check the existing CSS for submenu max height and scroll. Test with a large number of items to reproduce the issue.
Tech stack
typescriptreactcss
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
ReactTypeScriptCSS positioning
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70