Focus is lost when opening md-select options list #6690
Comments
|
Update: |
|
Focus moves to the select options which, in the DOM, are in an overlay at the end of the body. What if the select component had a class like |
|
@willshowell in my use case, I'm using a directive that use focusin and focusout events to add/remove styles to the whole component. I could add a workaround to those event that also check if the I would prefer to get those event only when the actual focus is indeed moved away from the component (and yes, I know that internally in the DOM it is like that). What about trying to avoid the event to bubble out of the P.S: I can provide the Directive code in case it is needed. |
|
I see, cc @crisbeto |
|
I'm currently working on switching |
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
* Refactors the select to use `aria-activedescendant` to announce the highlighted item to screen readers. Previously we would this through focus, however using focus prevents us from being able to do things like angular#3211. * Fixes a hack that was used to get a hold of the panel element using `querySelector`. Now it properly uses a `ViewChild` query, however this meant some tests had to be updated. Relates to angular#3211. Fixes angular#6690.
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Bug, feature request, or proposal:
When an user opens the md-select options list, focus is lost from the component itself.
What is the expected behavior?
Focus should remain in a child of md-select options and events such as focusin or focusout should not be triggered since the user has not really leave the component at tall.
What is the current behavior?
As soon as the options list opens, focus is lost form the component containing the md-select.
What are the steps to reproduce?
Check focus log when selecting options: http://plnkr.co/uySEJGxzMTkbO6DxlT1F
What is the use-case or motivation for changing an existing behavior?
In order to be able to track focus events and being able to apply custom styles to a component when it is focused, it is necessary that those events allow to track when the user really leave the component and they don't trigger while the user is selecting an option inside a form (for example).
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Tested with Angular 4.3.1, Material 2.0.0-beta.8 under Chrome.
The text was updated successfully, but these errors were encountered: