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);

material/src/components/tabs/js/tabsController.js

Line 716 in cf7f21a

if (totalWidth > tabWidth) $mdUtil.nextTick(updateInkBarStyles, false);

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

[pmowrer]

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

a120a35
a242a5f

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.