angular / angular/components

virtual-scroll inside mat-select new values not visible & big space

Ouverte
#13,087 19 commentaires 14 réactions 0 personnes assignées Voir sur GitHub
area: cdk/scrolling area: material/form-field area: material/select P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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

Bug

#### What is the expected behavior?

`cdk-virtual-scroll-viewport` inside a mat-select or mat-autocomplete should align with the overlay panel.

```




{{state}}


```

#### What is the current behavior?

When scrolled `cdkVirtualFor` does not seem to add more elements and moreover shows a big space from last element of the initial set of items to the end.

#### What are the steps to reproduce?

https://stackblitz.com/edit/angular-h4xptu-dgjd87?file=app/select-reset-example.html

#### What is the use-case or motivation for changing an existing behavior?

* Occasionally I run into scenarios where the items in the list are too many and makes the page unresponsive.

* Seem-less integration of cdk-virtual-scroll-viewport with other components.

* mat-select essentially can handle any number of elements when this works.

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

```
Angular CLI: 6.1.5
Node: 10.0.0
OS: win32 x64
Angular: 6.1.4
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, router

Package Version
------------------------------------------------------------
@angular-devkit/architect 0.7.5
@angular-devkit/build-angular 0.7.5
@angular-devkit/build-ng-packagr 0.7.5
@angular-devkit/build-optimizer 0.7.5
@angular-devkit/build-webpack 0.7.5
@angular-devkit/core 0.7.5
@angular-devkit/schematics 0.7.5
@angular/cdk 6.4.7
@angular/cdk-experimental 6.4.7
@angular/cli 6.1.5
@angular/compiler-cli 6.1.7
@angular/flex-layout 6.0.0-beta.17
@angular/language-service 6.1.7
@angular/material 6.4.7
@ngtools/webpack 6.1.5
@schematics/angular 0.7.5
@schematics/update 0.7.5
rxjs 6.2.2
typescript 2.9.2
webpack 4.9.2
```

#### Is there anything else we should know?

Great work

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction StackBlitz liée, en particulier app/select-reset-example.html, et examinez comment cdk-virtual-scroll-viewport est imbriqué dans mat-select ou mat-autocomplete. Reproduisez les éléments manquants et l’espace excessif lors du défilement, puis suivez l’interaction entre l’overlay et le virtual scroll. Le travail est terminé lorsque les valeurs nouvellement atteintes par le défilement apparaissent et que le viewport est aligné sur le panneau de l’overlay.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
42/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.