tabs: disabling the active tab causes focus to be stolen from other components outside of the tabs

[aurnot]

Actual Behavior:

• What is the issue? * When a md-tab is disabled, md-tabs activates the next valid tab and focuses it, therefore the user loses focus from whatever other component he was using.
• What is the expected behavior? The next valid tab should be activated, but focus should not be stolen from another part of the app that is still visible/active/accessible.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/MJGmpV?editors=1010
• Details: Focus the input. A md-tab will be disabled automatically after 10 seconds, and md-tabs will steal focus from the input.

Angular Versions: *

• Angular Version: Tested with 1.4.12 and 1.5.5
• Angular Material Version: Tested with 1.1.0 and 1.1.3

Additional Information:

• Browser Type: * any
• Browser Version: * any
• OS: * any
• Stack Traces:

Caused by refreshIndex() called when the ng-disabled attribute of a md-tab changes, therefore changing the ctrl.focusIndex, therefore triggering redirectFocus().

Proposed solution: could we check if focus was inside the removed tab content before forcing focus to the new tab label? Maybe with document.activeElement?

---

Shortcut to create a new CodePen Demo. Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions. Add more lines if needed.

[Splaktar]

I had to add the AngularJS and AngularJS Material js/css files to the CodePen (updated CodePen).

I also created a pen updated to AngularJS 1.8.0 and AngularJS Material 1.2.0 and the issue is still reproducible.