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.

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

fix(tabs): selectedIndex being overwritten if tabs are being added / removed #12245

Merged

Conversation

devversion
Copy link
Member

@devversion devversion commented Jul 17, 2018

Due to a recent change that ensures that the selected tab will be kept selected if a new tab has been added or removed (#9132), updating the selectedIndex at the same time will not have any effect because it will be overwritten by the _tabs.change (from #9132).

In order to guarantee that developers can add new tabs and immediately select them once the change detection runs, we only re-index the selectedIndex (purpose of #9132) whenever the indexToSelect has not explicitly changed (through developer bindings for example)

Fixes #12038

@devversion devversion added the target: patch This PR is targeted for the next patch release label Jul 17, 2018
@devversion devversion requested a review from andrewseguin as a code owner July 17, 2018 11:51
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label Jul 17, 2018
@devversion devversion changed the title fix(tabs): selectedIndex being overwritten if tabs are being added / … fix(tabs): selectedIndex being overwritten if tabs are being added / removed Jul 17, 2018
@devversion devversion force-pushed the fix/tabs-selected-index-overwritten branch 2 times, most recently from da0d714 to e087141 Compare July 17, 2018 12:15
// (since Math.max(NaN, 0) === NaN).
let indexToSelect = this._indexToSelect =
Math.min(this._tabs.length - 1, Math.max(this._indexToSelect || 0, 0));
// Clamp the `indexToSelect` not immediately in the setter because it can happen that
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Don't clamp the indexToSelect immediately in the setter..."

// Note the `|| 0`, which ensures that values like NaN can't get through
// and which would otherwise throw the component into an infinite loop
// (since Math.max(NaN, 0) === NaN).
return Math.min(this._tabs.length - 1, Math.max(this._indexToSelect || 0, 0));
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function feels a little weird since it's taking the _indexToSelect from this, but then it's just returning it instead of reassigning. Changing it to a parameter would be clearer and would allow it to be used for other things:

private _clampIndex(index: number): number {
  return Math.min(this._tabs.length - 1, Math.max(index || 0, 0));
}

Copy link
Member Author

@devversion devversion Jul 17, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with that.

Note: I allowed number | null as parameter type because I wanted to keep that NaN comment somewhere. Otherwise we would need to fallback multiple times to || 0.

Copy link
Member

@crisbeto crisbeto left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@crisbeto crisbeto added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jul 17, 2018
…removed

Due to a recent change that ensures that the selected tab will be kept selected if a new tab has been added or removed (angular#9132), updating the `selectedIndex` at the same time will not have any effect because it will be overwritten by the `_tabs.change` (from angular#9132).

In order to guarantee that developers can add new tabs and immediately select them once the change detection runs, we only re-index the `selectedIndex` (purpose of angular#9132) whenever the `indexToSelect` has not explicitly changed (through developer bindings for example)

Fixes angular#12038
@devversion devversion force-pushed the fix/tabs-selected-index-overwritten branch from 4a140b5 to f73f459 Compare July 20, 2018 15:06
@josephperrott josephperrott merged commit 569c221 into angular:master Jul 20, 2018
@devversion devversion deleted the fix/tabs-selected-index-overwritten branch July 20, 2018 20:15
@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 Sep 9, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Tabs] tab is not changed when selectedindex changes
4 participants