angular / angular/components

bug(mat-expansion-panel): header position is incorrect when call elementInsideMatExpansionPanel.scrollIntoView(true)

Aperta
#21,159 7 commenti 4 reazioni 0 assegnatari Vedi su GitHub
area: material/expansion P4
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Reproduction

- Components: https://angular-mat-expansion-panel-header-gone-after-scrollintoview.stackblitz.io

Steps to reproduce:

1. open [StackBlitz reproduce example](https://angular-mat-expansion-panel-header-gone-after-scrollintoview.stackblitz.io)
2. scroll to bottom
3. click `Test ScrollIntoView` button.

or.

1. Add `test` inside `mat-expansion-panel` tag.
2. Set `mat-expansion-panel` `expanded="false"`.
3. Call `elementInsideMatExpansionPanel.scrollIntoView(true)`, e.g. `document.querySelector('.bug-target').scrollIntoView(true)`.

#### Expected Behavior

Viewport scrolls to `mat-expansion-panel` with `mat-expansion-panel-header` display, and element inside `mat-expansion-panel` remains hidden.

#### Actual Behavior

Viewport scrolls to `mat-expansion-panel` and causes `mat-expansion-panel-header` x-position changed and `mat-expansion-panel-header` is not display.

#### Environment

- Angular: 11.0.1
- CDK/Material: 11.0.1
- Browser(s): Chrome Version 87.0.4280.66 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows, Ubutntu

#### Workaround

Call `window.scroll` or `scrollTo` function, see [StackBlitz reproduce example](https://angular-mat-expansion-panel-header-gone-after-scrollintoview.stackblitz.io)

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia con la riproduzione StackBlitz collegata e con il comportamento di mat-expansion-panel descritto nell’issue. Riproduci il problema chiamando scrollIntoView(true) su un elemento all’interno di un pannello compresso, quindi traccia il comportamento correlato dell’expansion-panel e dell’header. Il lavoro è completato quando il viewport scorre fino al pannello, mentre il relativo header rimane visualizzato e l’elemento interno resta nascosto.

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
35/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.