palantir/blueprint

Scrolling Select2 inside of Table2 causes Table2 to also scroll

Open

#5469 opened on Jul 27, 2022

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: popover2Package: selectPackage: tableType: bughelp wanted

Description

Environment

  • Package version(s):
@blueprintjs/select: 4.5.1
@blueprintjs/table": 4.4.1
  • Operating System: Windows 10 Pro Version 21H2
  • Browser name and version: Brave Version 1.41.100 -- Chromium 103.0.5060.134 (Official Build) (64-Bit)

Code Sandbox

Minimal repro: https://codesandbox.io/s/blueprint-sandbox-forked-tbjtm1?file=/src/Table2Example.tsx

Steps to reproduce

  1. Click on one of the dropdowns
  2. Attempt to scroll down

Actual behavior

The Table scrolls and the Menu scrolls.

Expected behavior

The Table does not scroll and the Menu scrolls.

Possible solution

Not sure. I've tried a bunch of things but nothing seems to work. Settings boundary on Table's popoverProps is what I expected to initially work but it didn't. It is also weird that even if the Menu is outside of the Table bounds and you scroll, the Table still scrolls.

One note: If you change the height and width in app.css to both 100%, the Table does not scroll as expected.

Contributor guide

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.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactCSS overflowevent propagation
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Investigate the scrolling behavior of Select2 inside Table2. Start by examining the code sandbox provided. Look into the popoverProps boundary setting and CSS overflow properties on the Table component. Check if there is a need to stop event propagation from the Select2 menu to the Table. Consider testing with 100% width/height as noted.