angular / angular/components

[MatSidenav] Sidenav Toggling Can Cause Content Shifting

Aperta
#12,349 3 commenti 7 reazioni 0 assegnatari Vedi su GitHub
area: material/sidenav P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
Mat-sidenav-content is not moved from original position upon quick mat-sidenav toggles

#### What is the current behavior?
Quick mat-sidenav toggles can cause mat-sidenav-content to be shifted over until the drawer is toggled again

#### What are the steps to reproduce?

Set the autofocus on mat-sidenav to true, and place a focusable input in the mat-sidenav
Click the 'open drawer' button quickly and repeatedly until the content shifts. Click the button again and the content will shift back.

https://stackblitz.com/edit/angular-eesonu

#### What is the use-case or motivation for changing an existing behavior?
Use-case: User accidentally opens the drawer and quickly presses again to undo the action. This will result in possibly all content on the page not being displayed.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular: 6.0.9
Material: 6.4.1

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia riproducendo il comportamento nello StackBlitz collegato con autofocus abilitato e un input su cui è possibile impostare il focus all'interno di MatSidenav, quindi esamina il comportamento di MatSidenav e mat-sidenav-content durante alternanze rapide. Il lavoro è completato quando azioni ripetute di apertura e chiusura non lasciano più mat-sidenav-content spostato e non è necessaria un'alternanza successiva per ripristinarne la posizione.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
4/5
Tempo stimato
3-5 giorni
Stato di attività
Ferma
Chiarezza
Abbastanza chiara
Idoneità per principianti
45/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.