palantir/blueprint

Blueprint v5 popover auto placement is different from v4

Open

#5,760 opened on Nov 18, 2022

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (2,167 forks)batch import
Domain: APIPackage: popover2help wanted

Repository metrics

Stars
 (20,263 stars)
PR merge metrics
 (Avg merge 43d 10h) (27 merged PRs in 30d)

Description

Environment

  • Package version(s): @blueprintjs/popover2 v1.10.0

Code Sandbox

Link to a minimal repro: https://sdlqfs.csb.app/

Problem

When configuring Popover2 with rootBoundary="viewport" or rootBoundary="document", the automatic popper.js placement has different behavior compared to Popover. This may be expected and a bugfix in some cases since the positioning engine has improved, but it may be unexpected in other cases.

There may be something we can improve here by setting / unsetting boundary and rootBoundary options on the various modifiers based on user-specified props. For example, I'm not sure that it's "correct" that we set boundary: "clippingParents" (applying the default) when the rootBoundary prop is defined: https://github.com/palantir/blueprint/blob/2460933e7084632f9f8b4f193fcda9fb9b3fd38f/packages/popover2/src/popover2.tsx#L493

Contributor guide

Research direction
Compare the popover2 modifier configuration with popover v4, focusing on the boundary and rootBoundary options. Trace how rootBoundary prop affects the modifiers, especially where boundary = 'clippingParents' is set. Check if that overrides the user's rootBoundary setting.
Tech stack
typescriptreact
Domain
frontend
Issue type
Bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
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.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
GitReactTypeScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60