Material: nav-bar: clicking a tab causes focus to move to a previously selected tab

[rohit1018]

Detailed Reproduction Steps:

1. Click on below md-nav-bar items
   https://material.angularjs.org/latest/demo/navBar
   

   What is the expected behavior?

md-nav-bar focus remove on previously selected nav-item

What is the current behavior?

md-nav-bar focus shows on previously selected nav-item

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.5.11
• AngularJS MateriaC: 1.1.12
• OS: Mac
• Browsers: Chrome

Is there anything else we should know? Stack Traces, Screenshots, etc.

https://material.angularjs.org/latest/demo/navBar

[codymikol]

Your codepen is not valid, but this is reproducible in the docs here https://material.angularjs.org/latest/demo/navBar

[codymikol]

Looks like this is a regression introduced in 1.1.11

This is the commit that introduced the regression: 4d294508ca53bf119c7a31297a6b41693c24e2aa

[codymikol]

I've Isolated this to a unit test, now working on a fix.

This is actually a difficult issue, it looks like the focus handling is fired immediately, but there are a bunch of timeouts on updating the actual state of the tabs so we have to wait for that to complete before setting focus.

It also looks like the updating functionality is called inside of a timeout and then internally it also calls a bunch of timeouts.

EDIT: This completely fixes the issue and I absolutely cannot see anything wrong with this

20 timeouts didn't seem to do the trick, but 30 works great.

(Obviously this is a joke, please don't do this)

Still working on an elegant solution, hopefully I'll have more luck tomorrow.

[rohit1018]

I've Isolated this to a unit test, now working on a fix.

This is actually a difficult issue, it looks like the focus handling is fired immediately, but there are a bunch of timeouts on updating the actual state of the tabs so we have to wait for that to complete before setting focus.

It also looks like the updating functionality is called inside of a timeout and then internally it also calls a bunch of timeouts.

EDIT: This completely fixes the issue and I absolutely cannot see anything wrong with this

20 timeouts didn't seem to do the trick, but 30 works great.

(Obviously this is a joke, please don't do this)

Still working on an elegant solution, hopefully I'll have more luck tomorrow.

Okay thank you

[Splaktar]

Thank you for taking the time to submit this issue. However it does not follow our required issue template. Providing a CodePen demo or link to a demo in the docs along with reproduction steps is required. This gives the team the information needed to investigate the bug or prioritize the feature.

Please provide reproduction steps as I do not see an issue with the existing demo. Note that pressing the arrow keys only moves the focus, it does not change the tab selection. You need to press the space bar for the tab to be selected.

Also note that the focus is indicated by the darker background and the selection is indicated by the colored label and inkbar.

[codymikol]

@Splaktar you can view the regression here

Just click on a nav-bar button and you will see that the focus is pulled onto the previously selected tab.

Browser: Chrome v71
OS: Mac OS Mojave 10.14
AngularJS: 1.7.4
Angular Material: 1.1.12

[Splaktar]

OK, thank you, it is helpful to know that clicking the mouse is required to reproduce this issue. It looks like in 1.1.10 the focus decoration would disappear, but we don't want that to happen for a11y reasons. But it certainly should stay on the clicked tab and not jump away like that.

[codymikol]

I have a branch that isolates this into a test and part of a fix prepared, I'll probably be able to wrap it up tonight.

[Splaktar]

@codymikol awesome, thank you for looking into this!

[Splaktar]

@codymikol any progress on this? Do you want me to take a look at what you have so far?

[codymikol]

@Splaktar That should fix it. It's really strange, apparently there is just a significant delay from when focus events are fired to when click events are fired.

[Splaktar]

PR https://github.com/angular/material/pull/11600 takes a different approach at fixing this w/o an extra timeout. Please take a look.