Components: mat-select multiple scrolling bug

Created on 28 Feb 2020 · 4Comments · Source: angular/components

Reproduction

Steps to reproduce:

Go to https://stackblitz.com/edit/components-issue-nzdnxa
Open the menu by clicking "Country Code"
Scroll down and select "Venezuela2"
Scroll up and select "Peru"

Expected Behavior

After I click on an option, the scrollbar of mat-select should not move

Actual Behavior

After I click on an option, the selected option moves to top of the list

Environment

Angular: 8.2.14
CDK/Material: ^8.2.3
Browser(s): Chrome
Operating System (e.g. Windows, macOS, Ubuntu): Windows

Context

This bug was opened two years ago and closed/locked without ever being resolved (https://github.com/angular/components/issues/5381). Please do not close this bug until the resolution has been confirmed.

EDIT (in case someone messes with the linked code):

I'm attaching text files with the code since I can't get the "insert code" sections to display properly.

HTML:
html.txt

TypeScript:
typescript.txt

package.json:
package.json.txt

materiaselect needs clarification

Source

ThanosAlmighty

Most helpful comment

Hello,

I spent hours on this issue, here is my workaround so far:

@ViewChild(MatSelect, { static: true }) mySelect: MatSelect;

private scrollTopBeforeSelection: number;

ngOnInit() {
  this.mySelect.openedChange.subscribe((open) => {
    if (open) {
      this.mySelect.panel.nativeElement.addEventListener(
        'scroll',
        (event) => (this.scrollTopBeforeSelection = event.target.scrollTop)
      );
    }
  });

  this.mySelect.optionSelectionChanges.subscribe(() => {
    this.mySelect.panel.nativeElement.scrollTop = this.scrollTopBeforeSelection;
  });
}

Regards

MartyHub on 28 Jun 2020

👍5 ❤3

All 4 comments

Hello,

I spent hours on this issue, here is my workaround so far:

@ViewChild(MatSelect, { static: true }) mySelect: MatSelect;

private scrollTopBeforeSelection: number;

ngOnInit() {
  this.mySelect.openedChange.subscribe((open) => {
    if (open) {
      this.mySelect.panel.nativeElement.addEventListener(
        'scroll',
        (event) => (this.scrollTopBeforeSelection = event.target.scrollTop)
      );
    }
  });

  this.mySelect.optionSelectionChanges.subscribe(() => {
    this.mySelect.panel.nativeElement.scrollTop = this.scrollTopBeforeSelection;
  });
}

Regards

MartyHub on 28 Jun 2020

👍5 ❤3

mat-select doesn't change the scroll position itself when you're clicking on the options. I think the problem is that you're adding options before the selected one which changes the size of the list and causes it to jump around.

crisbeto on 19 Jul 2020

@ThanosAlmighty I looked at your stackblitz and it does seem like changing the items is the source of the position jumping

jelbourn on 7 Aug 2020

Similar issue https://stackblitz.com/edit/angular-1temy3 with version 9.2.4, looks like it has been fixed in v10
Screencapture6
I use the list with selection, no matter single or multiple selection mode, when I click the scroll arrow button on the scroll bar. it always scroll from the first item (when no selection) or first selected item (may be). I guess the problem is on this method https://github.com/angular/components/blob/1e94871cda74243c5c551f5757a01c96297c34ad/src/material/list/selection-list.ts#L582
After I override this method to do nothing, the behavior is as expected