-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
fix(tabs): selectedIndex being overwritten if tabs are being added / removed #12245
Conversation
da0d714
to
e087141
Compare
src/lib/tabs/tab-group.ts
Outdated
// (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 |
There was a problem hiding this comment.
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..."
src/lib/tabs/tab-group.ts
Outdated
// 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)); |
There was a problem hiding this comment.
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));
}
There was a problem hiding this comment.
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
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
…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
4a140b5
to
f73f459
Compare
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
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 theindexToSelect
has not explicitly changed (through developer bindings for example)Fixes #12038