angular/components

bug(Sidenav): Using scrollIntoView() with multiple sidenavs

Fechada

#20.447 aberto em 28 de ago. de 2020

Ver no GitHubGuia do colaborador
 (2 comentários) (0 reação) (0 responsável)TypeScript (6.650 forks)batch import
P4area: material/sidenavhelp wanted

Métricas do repositório

Stars
 (24.044 estrelas)
Métricas de merge de PR
 (Mesclagem média 3d 12h) (98 fundiu PRs em 30d)

Description

Reproduction

https://angular-9-multiple-sidenav-scrollintoview-issue-1.stackblitz.io

Steps to reproduce:

  1. Close Sidenav 2 by clicking toggle button
  2. Run the following in browsers console: document.getElementsByClassName('mat-drawer-content')[0].scrollIntoView()

Expected Behavior

In this example nothing should happen.

Note: The scrollIntoView function works as intended. In this example nothing happens since content is too small to make page scrollable.

Actual Behavior

Entire page slides left. Notice how Sidenav 1 disappears. To better visualize the issue, you can at this point toggle sidenav 1. Button for sidenav 1 will no slide left out of view.

Environment

  • Angular: 9
  • CDK/Material: 9.0.1
  • Browser(s): IE 11
  • Operating System (e.g. Windows, macOS, Ubuntu): WIndows

Other Notes

This issue ONLY happens when Sidenav 2 is closed. There is no issue if Sidenav 1 is closed, or both sidenavs is closed or opened.

Guia do colaborador

Direção de pesquisa
Investigate the scrollIntoView behavior when multiple sidenavs are present, specifically when one is closed. Look at the sidenav component's scroll container logic in the Angular Material source code (e.g., src/material/sidenav). The issue mentions it only happens in IE 11, so consider cross browser compatibility. There is a StackBlitz reproduction that can be used to isolate the problem. Check if there are any existing tests for scrollIntoView in the sidenav.
Pilha de tecnologia
angulartypescripthtmlcss
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.
3
Tempo estimadoUm intervalo de tempo aproximado para um colaborador experiente investigar, implementar, testar e preparar um pull request.
Meio dia
Status da atividadeQuão disponível o issue aparece agora: novo, ativo, obsoleto, bloqueado ou aguardando entrada do mantenedor.
Antigo
ClarityCom que clareza o issue explica a mudança esperada, os critérios de aceitação e a próxima etapa.
Claro
Prerequisites
Angular basicsCSS layoutscrollIntoView APIIE 11 testing
Simpatia para novatosUma pontuação de 1 a 100 que estima o quão acessível este issue é para colaboradores iniciantes.
50