Components: Material select component scrolls to focused option after selection

[mertdeg]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

After I click on an option, the scrollbar of md-select is not affecting

What is the current behavior?

After I click on an option, the scrollbar of md-select scrolls to latest focused node

What are the steps to reproduce?

1. Go to http://plnkr.co/edit/6c98wOpbvMtLIWMHCP7k?p=preview
2. Open the menu by clicking "Click for menu"
3. Scroll down and select "opt12"
4. Scroll up and select "opt1"

GIF:

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

This decreases usability of the component.

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

Angular2, material2, all browsers

Is there anything else we should know?

[crisbeto]

Looking into it, why are you doing a slice inside the change callback? What you're doing is forcing Angular to re-render the list of options, which will cause the select to re-focus the first option.

[mertdeg]

The way I was using the component is a bit different, and slice is the only way I could simulate our use case..

Basically, in our usage, we pass the values down from an object (lets call it of type foo), and we emit an event when ngModel on mat-select changes.

Once ngModel changes, we recompute array of foo objects. Long story short, we end up with a new instance of the same array.

[mertdeg]

Also, why is it focusing on the first option, after i click on another option?

[mertdeg]

@jelbourn as FYI

[crisbeto]

It's an accessibility feature. That being said, I don't think it should happen after the first open, because focus is already in the user's control. Will look into it better tomorrow.

[msrandhawa]

Hello Kristiyan (@crisbeto),

Is there any update on this? Has this issue been resolved? We are facing this exact same issue in our component and are wondering if a solution is available to address this.

Thanks.

[crisbeto]

There's a pending PR that is waiting to be merged https://github.com/angular/material2/pull/5401.

[msrandhawa]

Okay, thanks for the update. Is there an estimate on when this PR would be merged and this fix would be available for use by us?

[crisbeto]

I can't give any guarantees, but it's in the queue to be merged and should be available in the next release.

[msrandhawa]

Okay, that sounds good. Can you kindly advise roughly when is the next release expected?

[nethulap]

This issue still happens in angular-material version 5.2.4

[kuhlschrank]

We are still facing the issue with angular-material 6.4.7

[epotyomkin]

We are still facing the issue with angular-material 6.4.7
+1

[sumanthitha]

Is this issue fixed using 6.4.7

[StefanFalz]

We're using 7.3.7 and facing the same issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}