bug(mat-expansion-panel): header position is incorrect when call elementInsideMatExpansionPanel.scrollIntoView(true)
- Vorherrschende Sprache
- TypeScript
- Sterne
- 25k
- Forks
- 6.8k
- Ø Merge
- 1 T. 8 Std.
- Gemergte PRs (30 T.)
- 91
Beschreibung
#### 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)
Beitragsleitfaden
Rechercherichtung
Beginne mit der verknüpften StackBlitz-Reproduktion und dem im Issue beschriebenen Verhalten von mat-expansion-panel. Reproduziere das Problem, indem du scrollIntoView(true) für ein Element innerhalb eines eingeklappten Panels aufrufst, und verfolge anschließend das damit verbundene Verhalten von Expansion-Panel und Header. Als erledigt gilt die Aufgabe, wenn der Viewport zum Panel scrollt, während sein Header weiterhin angezeigt wird und das innere Element verborgen bleibt.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- angular, typescript
- Bereich
- frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 4/5
- Geschätzter Aufwand
- 3-5 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Größtenteils klar
- Anfängerfreundlichkeit
- 35/100