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

Paper-tabs Assertion Failed: You modified canPageBack twice in a single render #980

Merged

Conversation

betocantu93
Copy link
Contributor

Im getting this error
Assertion Failed: You modified "canPageBack" twice in a single render
in mobile chrome which prevents the smoothly transition to hidden tabs.

I tracked it down to this.fixOffsetIfNeeded(); which is executed everytime the _selectedTab change which at least in my use case, it can be changed both programatically (i.e selected=someProperty) or by the end user when clicked on a tab or the next, previous arrows.

@betocantu93
Copy link
Contributor Author

I just noticed the observer _selectedTabDidChange is getting fired, twice... I need to track why, it might be a bug in my app code.

…use it's watching a computed property in paper-tab
@betocantu93 betocantu93 reopened this Sep 19, 2018
@betocantu93
Copy link
Contributor Author

The _selectedTab computed gets triggered N times each selected change, this leads to changing the variable twice in the single render, so changing the computed to watch selected, which in theory just changes once and finding in childs by value, will just execute the observer once.

@miguelcobain
Copy link
Owner

@betocantu93 _selectedTab is indeed triggering multiple times when clicking on a tab. Nice find.

I don't think we should remove the childComponents dependency entirely from the observer, though.
The reason is because we might want to add a tab later, and in that case the offset needs to be run to update the ink bar position.

I tried the following locally and it seems to only trigger _selectedTab once. Can you try it on your local and see if it fixes your "modified twice" errors?
If it solves, please update the PR with the changes.

-  _selectedTab: computed('childComponents.@each.isSelected', function() {
-    return this.get('childComponents').findBy('isSelected');
+  _selectedTab: computed('childComponents.@each.value', 'selected', function() {
+    return this.get('childComponents').findBy('value', this.get('selected'));
   }),
 
-  _selectedTabDidChange: observer('_selectedTab', function() {
+  _selectedTabDidChange: observer('_selectedTab', 'childComponents.[]', function() {
     let selectedTab = this.get('_selectedTab');
     let previousSelectedTab = this.get('_previousSelectedTab');

@betocantu93
Copy link
Contributor Author

betocantu93 commented Sep 19, 2018

Your changes work in my app, it only gets triggered once

@miguelcobain miguelcobain merged commit 09bfbbc into miguelcobain:master Sep 19, 2018
@miguelcobain
Copy link
Owner

Thanks a lot @betocantu93 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants