angular / angular/components

bug(cdk/scrolling): The append only mode assumes that scrolling starts at zero and therefore calculates renderedRange incorrectly

Aperta
#23,578 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
area: cdk/scrolling P3
Lingua principale
TypeScript
Stelle
25k
Fork
6.8k
Merge medio
1g 8h
PR unite (30g)
91

Descrizione

#### Reproduction

Steps to reproduce:
1. Create a virtual scroll container with `appendOnly`
2. Load the virtual scroll container and don't load it from the top
3. The `renderedRange` is wrongly calculated/set

#### Expected Behavior

A virtual scroll container can be loaded at any position without `renderedRange` being set incorrectly.

#### Actual Behavior

The `renderedRange` was set incorrectly once the virtual scroll container was loaded not at the top. I archived this behaviour via the following CSS setting.

```
[cdk-virtual-scroll-viewport] {
overflow-anchor: none;
}
```

#### A possible solution

I was able to solve this issue by overriding the following code at [virtual-scroll-viewport.ts#L292](https://github.com/angular/components/blob/6076801883194f263a5c692797ffc863a8de9771/src/cdk/scrolling/virtual-scroll-viewport.ts#L292)

```diff
if (this.appendOnly) {
- range = {start: 0, end: Math.max(this._renderedRange.end, range.end)};
+ range = {start: Math.min(this._renderedRange.start, range.start), end: Math.max(this._renderedRange.end, range.end)};
}
```

I am not sure if I am missing something. For this reason, I have just opened an issue and no pull request for now.

#### Environment

- Angular: 12.2.5
- CDK/Material: 12.2.5
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): macOS

Guida per i contributori

Apri la guida per i contributori

Direzione di ricerca

Inizia in src/cdk/scrolling/virtual-scroll-viewport.ts, intorno al calcolo dell'intervallo appendOnly alla riga 292, quindi riproduci il problema con un contenitore di scorrimento virtuale caricato in una posizione diversa da zero. Verifica che renderedRange conservi l'intervallo caricato inizialmente invece di presumere un inizio pari a zero; il lavoro è completato quando appendOnly funziona correttamente per questo caso.

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

Valutazione

Stack tecnologico
angular, typescript
Ambito
frontend
Tipo di issue
Bug
Difficoltà
3/5
Tempo stimato
1-2 giorni
Stato di attività
Ferma
Chiarezza
Specificata chiaramente
Idoneità per principianti
55/100

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.