palantir/blueprint

Drawer animation bug when rendered inline and container overflows viewport

Open

#4,664 opened on 2021年4月22日

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

説明

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

コントリビューターガイド

技術スタック
typescriptreactcss
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
1-3 hours
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
ReactTypeScriptCSS animationsBlueprint Overlay component
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
75
調査方針
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.