palantir/blueprint

Drawer animation bug when rendered inline and container overflows viewport

Open

#4.664 aberto em 22 de abr. de 2021

Ver no GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (2.167 forks)batch import
P2Type: bughelp wanted

Métricas do repositório

Stars
 (20.263 stars)
Métricas de merge de PR
 (Mesclagem média 43d 10h) (27 fundiu PRs em 30d)

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

Guia do colaborador

Direção de pesquisa
Investigue o componente Overlay em packages/core/src/components/overlay/overlay.tsx, especificamente a lógica de tabIndex em torno da linha 398. Reproduza o bug usando o CodeSandbox fornecido. Verifique como a animação da gaveta interage com o overflow do contêiner e o gerenciamento de foco. Considere ajustar o comportamento do foco quando usePortal for false e o contêiner estiver com overflow.
Pilha de tecnologia
typescriptreact
Domain
frontend
Tipo Issue
Bug
DifficultyDificuldade de implementação estimada para um novo contribuidor, de 1 para alterações muito pequenas a 5 para trabalho de nível especializado.
2
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
1-3 horas
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Ativo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Principalmente claro
Prerequisites
ReactCSS
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
50