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.

Sign up for GitHub

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

Jump to bottom

bug(Mat Tabs): focusChange event does not fire when selecting first tab #20374

Closed
workcomped opened this issue Aug 20, 2020 · 2 comments · Fixed by #20384
Closed

bug(Mat Tabs): focusChange event does not fire when selecting first tab #20374

workcomped opened this issue Aug 20, 2020 · 2 comments · Fixed by #20384
Assignees
@crisbeto
Labels
area: material/tabs good first issue This issue is a good place to start for first time contributors to the project help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@workcomped
Copy link

workcomped commented Aug 20, 2020 •
edited

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
@workcomped workcomped added the needs triage This issue needs to be triaged by the team label Aug 20, 2020
@workcomped workcomped changed the title bug(Mat Tabs): focusChange event does not fire when selecting first tab if initial selectedIndex is not 0 bug(Mat Tabs): focusChange event does not fire when selecting first tab Aug 20, 2020
@jelbourn jelbourn added area: material/tabs good first issue This issue is a good place to start for first time contributors to the project help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed needs triage This issue needs to be triaged by the team labels Aug 20, 2020
@jelbourn
Copy link
Member

Confirmed that this is happening. I think this should be relatively simple to fix.

@crisbeto crisbeto self-assigned this Aug 21, 2020
crisbeto added a commit to crisbeto/material2 that referenced this issue Aug 21, 2020
@crisbeto
fix(tabs): always defaulting focusIndex to 0 on initialization
d9adef7 
We were always defaulting the `focusIndex` to 0 on init, rather than taking the index of the selected tab. We actually had tests for this behavior, but they were all testing against 0 so we never caught the issue.

Fixes angular#20374.
@crisbeto crisbeto mentioned this issue Aug 21, 2020
Merged
wagnermaciel pushed a commit that referenced this issue Sep 16, 2020
@crisbeto
fix(tabs): always defaulting focusIndex to 0 on initialization (#20384)
a0b44d4 
We were always defaulting the `focusIndex` to 0 on init, rather than taking the index of the selected tab. We actually had tests for this behavior, but they were all testing against 0 so we never caught the issue.

Fixes #20374.
wagnermaciel pushed a commit that referenced this issue Sep 16, 2020
@crisbeto @wagnermaciel
fix(tabs): always defaulting focusIndex to 0 on initialization (#20384)
60a3527 
We were always defaulting the `focusIndex` to 0 on init, rather than taking the index of the selected tab. We actually had tests for this behavior, but they were all testing against 0 so we never caught the issue.

Fixes #20374.

(cherry picked from commit a0b44d4)
@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 Oct 17, 2020
wagnermaciel pushed a commit to wagnermaciel/components that referenced this issue Jan 14, 2021
@crisbeto @wagnermaciel
fix(tabs): always defaulting focusIndex to 0 on initialization (angul…
2875122 
…ar#20384)

We were always defaulting the `focusIndex` to 0 on init, rather than taking the index of the selected tab. We actually had tests for this behavior, but they were all testing against 0 so we never caught the issue.

Fixes angular#20374.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
area: material/tabs good first issue This issue is a good place to start for first time contributors to the project help wanted The team would appreciate a PR from the community to address this issue P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(tabs): always defaulting focusIndex to 0 on initialization crisbeto/material2
3 participants
@jelbourn @crisbeto @workcomped