Material: tabs: infinite loop when using md-center-tabs

[andrew-cunliffe]

When using protractor to test pages using md-tabs we cannot have the md-center-tabs option, this sort of ruins our layout, for now we have put a cheat to apply the styles manually that are required so we can have the tests and functionality.

[pmowrer]

Having the exact same problem. The test times out when it encounters the tabs.

[pmowrer]

It looks like the culprit is the following $mdUtil.nextTick call:

// material/src/components/tabs/js/tabsController.js
if (ctrl.shouldCenterTabs) {
  tabWidth = Array.prototype.slice.call(elements.tabs).reduce(function (value, element) {
    return value + element.offsetWidth;
  }, 0);
if (totalWidth > tabWidth) $mdUtil.nextTick(updateInkBarStyles, false);

https://github.com/angular/material/blob/cf7f21aa6c633d9f0bd22013e9a79f99b82b16af/src/components/tabs/js/tabsController.js#L716

It's basically an infinite loop... totalWidth always exceeds tabWidth.

[pmowrer]

And here are the commits that I believe injected the bug:

https://github.com/angular/material/commit/a120a3582c70d37c2ba624208da3cb987d6b2f6e
https://github.com/angular/material/commit/a242a5fbcc3bc02e139f19d5c9e5a0b7f57b1b1f

Even if the width calculations are "corrected", the timeout loop should probably be reconsidered. It's brittle and highly susceptible to an issue like this. It was only a matter of time.

[pmowrer]

And here's a workaround, tested with all major browsers including IE11:

md-tabs-canvas.md-center-tabs {
  // Keeps IE11 from making `md-pagination-wrapper` as wide as the page.
  align-items: center;

  md-pagination-wrapper {
    width: auto !important;
  }
}

The title of this issue should be updated to make it clear that this has nothing to do with Protractor per se; its an infinite loop that presumably will run on any page that includes md-tabs. Pretty serious problem.

[andrew-cunliffe]

Nice on the investigation :) I have updated the title to the issue

[robertmesserle]

@topherfangio I don't have any particular insight into this, but I'd try looking at the code that @pmowrer posted above. If that code works, look at the code that sets the width of md-pagination-wrapper and see if it's necessary with this fix.

[ThomasBurleson]

This issue is closed as part of our deprecation effort.
For details, see our post Spring Cleaning 2016.

[stormageddon]

Has anyone found any work around for this issue other than the suggestion by @pmowrer ? I am encountering this with non-centered md-tabs in angular-material 0.11.3.

md-tabs-canvas { md-pagination-wrapper { width: auto !important; } }

has not fixed the problem. I have also tried manually moving the mouse to click the tab with no luck. This bug is making it impossible to test a critical component of our application, so any resolution would be very helpful.

[pmowrer]

Looks like this got fixed in https://github.com/angular/material/issues/8289

[r0b-]

Unfortunately the problem still exits, but workaround from @pmowrer still works ...

[ThomasBurleson]

FYI @topherfangio

[Splaktar]

@r0b- can you please confirm the version of AngularJS Material that you are still seeing this issue with? The fix in #8289 went into 1.1.0.

I'll close this if you aren't seeing it anymore or if I don't get a response.

I'm also looking for a CodePen demo of this issue so that I can debug it. For now, I will look at https://github.com/angular/material/issues/9690 since it seems to be related (possible duplicate) and it has a CodePen reproduction.

[Splaktar]

It does indeed look like https://github.com/angular/material/issues/9690 is the same issue as this one.

PR https://github.com/angular/material/pull/11375 has been submitted with the fix for these issues. My apologies for the lengthy delay in resolving this serious issue.