palantir/blueprint

Drawer animation bug when rendered inline and container overflows viewport

Open

#4664 aperta il 22 apr 2021

Vedi su GitHub
 (0 commenti) (0 reazioni) (0 assegnatari)TypeScript (2167 fork)batch import
P2Type: bughelp wanted

Metriche repository

Star
 (20.263 star)
Metriche merge PR
 (Merge medio 43g 10h) (27 PR mergiate in 30 g)

Descrizione

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

Guida contributor

Direzione di ricerca
Indaga sul componente Overlay in packages/core/src/components/overlay/overlay.tsx, in particolare la logica tabIndex intorno alla riga 398. Riproduci il bug utilizzando il CodeSandbox fornito. Verifica come l'animazione del drawer interagisce con l'overflow del contenitore e la gestione del focus. Considera di regolare il comportamento del focus quando usePortal è false e il contenitore va in overflow.
Tech stack
typescriptreact
Dominio
frontend
Tipo issue
Bug
DifficoltàQuanto dovrebbe essere impegnativa per un nuovo contributor.
2
Tempo stimatoTempo stimato per completare e verificare uno scope piccolo.
1-3 ore
Stato attivitàQuanto è probabile che la issue sia ancora attiva e reviewable.
Attiva
ChiarezzaQuanto chiaramente la issue descrive problema, scope e risultato atteso.
Abbastanza chiara
Prerequisiti
ReactCSS
Adatta ai principiantiQuanto la issue è adatta a contributor alla prima esperienza.
50