palantir/blueprint

Drawer animation bug when rendered inline and container overflows viewport

Open

#4,664 opened on Apr 22, 2021

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Type: bughelp wanted

Description

Environment

  • Package version(s): core 3.39.0+
  • Operating System: macOS
  • Browser name and version: Chrome 90

Code Sandbox

https://codesandbox.io/s/blueprint-sandbox-forked-cvz8o?file=/src/CoreExample.tsx

Steps to reproduce

  1. render a Drawer with usePortal={false} canOutsideClickClose={false} (as in the above sandbox)
  2. for a horizontal Drawer (Drawer A), resize window so that the Drawer container (where the drawer will render, since we're not using a portal) overflows horizontally (in the sandbox, this means make the preview window <800px wide)
  3. open Drawer A

Actual behavior

Jumpy animation as the component tries to bring the drawer into "focus" before its animation completes:

2021-04-22 13 50 39

Expected behavior

Smooth animation, same as the one we see if canOutsideClickClose={true}

Possible solution

tabIndex may be a culprit https://github.com/palantir/blueprint/blob/a1121bc84b3783dd624e91002c07f68cfa80811e/packages/core/src/components/overlay/overlay.tsx#L398

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.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ReactTypeScriptCSS animationsBlueprint Overlay component
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
75
Research direction
Investigate the Overlay component at packages/core/src/components/overlay/overlay.tsx, specifically the tabIndex logic around line 398. Reproduce the bug using the provided CodeSandbox. Check how the drawer animation interacts with the container overflow and focus management. Consider adjusting the focus behavior when usePortal is false and the container overflows.
Drawer animation bug when rendered inline and container overflows viewport · palantir/blueprint#4664 | Good First Issue