Skip to content

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