angular / angular/components

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

Open
#13,087 19 comments 14 reactions 0 assignees View on GitHub
area: cdk/scrolling area: material/form-field area: material/select P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
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

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction, especially app/select-reset-example.html, and inspect how cdk-virtual-scroll-viewport is nested in mat-select or mat-autocomplete. Reproduce the missing items and excess space while scrolling, then trace the overlay and virtual-scroll interaction. Done means newly scrolled values appear and the viewport aligns with the overlay panel.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.