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

"Uncaught Error: infinite rendering invalidation detected" when using paper-tabs #990

Closed
atachev opened this issue Oct 16, 2018 · 1 comment
Closed

"Uncaught Error: infinite rendering invalidation detected" when using paper-tabs #990

atachev opened this issue Oct 16, 2018 · 1 comment

Comments

@atachev
Copy link

atachev commented Oct 16, 2018

Steps

  • Open dev tools(Or simply do the second step without opening with the dev tools)
  • Shrink the screen horizontally under 400px
  • The <body> should be blank now

and the exception is:

Uncaught Error: infinite rendering invalidation detected
    at Array.loopEnd (ember-glimmer.js:4193)
    at Backburner._trigger (backburner.js:876)
    at Backburner._end (backburner.js:784)
    at Backburner.end (backburner.js:514)
    at Backburner._run (backburner.js:817)
    at Backburner._join (backburner.js:793)
    at Backburner.join (backburner.js:568)
    at Array.loopEnd (ember-glimmer.js:4196)
    at Backburner._trigger (backburner.js:876)
    at Backburner._end (backburner.js:784)

Example

You can try it here:
https://miguelcobain.github.io/ember-paper/#/components/tabs

Note

In my current case I have 2 {{paper-tabs}} components in different pages.
In the first page the tabs are into {{paper-sidenav}} which is wrapped in {{paper-card}}. Here the sidenav is toggle-able I cannot reproduce this bug even when the {{paper-sidenav}} is open. In the second page the tabs are directly added to {{paper-card}} and here the problem is reproducible.
@panthony
Copy link
Contributor

panthony commented Dec 27, 2018 •
edited

After I upgraded to the latest ember-paper, all my tests using tabs where failing due to Uncaught Error: infinite rendering invalidation detected where the real error underneath is the following:

  updateDimensions() {
    let canvasWidth = this.element.querySelector('md-tabs-canvas').offsetWidth;
    let wrapperWidth = this.element.querySelector('md-pagination-wrapper').offsetWidth;
    // ....
   }

That may be called whereas this.element is null.

capture d ecran 2018-12-27 a 14 53 30

When this.element is null the  isDestroying flags is sets to true.

edit:

The infinite rendering invalidation was in fact a separate issue... I fixed the this.element is null but the first one remains.

This is caused by didRender that calls updateCanvasWidth that trigger a re-render that calls didRender, ...

edit 2:

Turns out this the call to fixOffsetIfNeeded within updateCanvasWidth that triggers a re-render.

@panthony panthony mentioned this issue Dec 27, 2018
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@panthony @atachev