Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Material select component scrolls to focused option after selection #5381

Closed
mertdeg opened this issue Jun 27, 2017 · 16 comments · Fixed by #5401
Closed

Material select component scrolls to focused option after selection #5381

mertdeg opened this issue Jun 27, 2017 · 16 comments · Fixed by #5401
Assignees
Labels
Accessibility This issue is related to accessibility (a11y) P2 The issue is important to a large percentage of users, with a workaround

Comments

@mertdeg
Copy link

mertdeg commented Jun 27, 2017

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:
d7baf6bd-f862-437f-9e10-ec025e824662

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 crisbeto self-assigned this Jun 27, 2017
@crisbeto crisbeto added the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jun 27, 2017
@crisbeto
Copy link
Member

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.

@crisbeto crisbeto removed the P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent label Jun 27, 2017
@mertdeg
Copy link
Author

mertdeg commented Jun 27, 2017

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
Copy link
Author

mertdeg commented Jun 27, 2017

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

@mertdeg
Copy link
Author

mertdeg commented Jun 27, 2017

@jelbourn as FYI

@crisbeto
Copy link
Member

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.

@jelbourn jelbourn added Accessibility This issue is related to accessibility (a11y) P2 The issue is important to a large percentage of users, with a workaround labels Jun 27, 2017
crisbeto added a commit to crisbeto/material2 that referenced this issue Jun 28, 2017
…ged programmatically

Doesn't shift focus when the value of a multi select is updated programmatically while the panel is still open. Previously focus would end up on the last selected option, because we move focus in a loop.

Fixes angular#5381.
@msrandhawa
Copy link

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
Copy link
Member

crisbeto commented Aug 9, 2017

There's a pending PR that is waiting to be merged #5401.

@msrandhawa
Copy link

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
Copy link
Member

crisbeto commented Aug 9, 2017

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

@msrandhawa
Copy link

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

mmalerba pushed a commit that referenced this issue Aug 9, 2017
…ged programmatically

Doesn't shift focus when the value of a multi select is updated programmatically while the panel is still open. Previously focus would end up on the last selected option, because we move focus in a loop.

Fixes #5381.
andrewseguin pushed a commit that referenced this issue Aug 15, 2017
…ged programmatically (#5401)

Doesn't shift focus when the value of a multi select is updated programmatically while the panel is still open. Previously focus would end up on the last selected option, because we move focus in a loop.

Fixes #5381.
@nethulap
Copy link

This issue still happens in angular-material version 5.2.4

@kuhlschrank
Copy link

We are still facing the issue with angular-material 6.4.7

@epotyomkin
Copy link

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

@sumanthitha
Copy link

sumanthitha commented Mar 6, 2019

Is this issue fixed using 6.4.7

@StefanFalz
Copy link

We're using 7.3.7 and facing the same issue.

@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Accessibility This issue is related to accessibility (a11y) P2 The issue is important to a large percentage of users, with a workaround
Projects
None yet
9 participants