Reproduction

https://stackblitz.com/edit/angular-yrahxe?file=src%2Fapp%2Ftab-group-basic-example.html

Steps to reproduce:

1. Create a MatTabGroup with more than one tab
2. Set selectedIndex input on MatTabGroup to any valid index above 0
3. bind to focusChange event and attempt to work with this event
4. Select first tab

Expected Behavior

focusChange event should fire when a tab is changed regardless of initially selected tab (index) as a focus change occurred.

Actual Behavior

focusChange event does not fire if first tab is selected as internally it seems to assume the focus is on the first tab. For example, start on selectedIndex = 1 and clicking second tab will fire the event.

Potential Cause & Fix

It seems that in paginated-tab-header.ts, on initialization the initially active item is always 0. Since we should have access to the selectedIndex by this point, setting the following may address this problem.

this._keyManager.updateActiveItem(this._selectedIndex);

Environment

• Angular: 10.0.0
• CDK/Material: 10.0.0
• Browser(s): Chrome
• Operating System Windows