Dialog does not support multiple tabs

[starksds]

Bug, feature request, or proposal:

Bug: Multiple tabs in a dialog cause chrome to go aw snap

What is the expected behavior?

I should be able to have more than one tab in a dialog

What is the current behavior?

You can render one tab in a dialog but as soon as you add two chrome goes aw snap

What are the steps to reproduce?

Create a dialog. Have the contents of the dialog be tabs. Add one tab, everything works great. Add two or more tabs and chrome will eventually go aw snap.

What is the use-case or motivation for changing an existing behavior?

There is no purpose for using tabs if you can only have one

Which versions of Angular, Material, OS, browsers are affected?

Angular 2.2.4
Material 2.0.0-alpha.11-2

Is there anything else we should know?

No

[jelbourn]

@starksds can you share reproduction code?

[starksds]

@jelbourn I've already rolled back my changes. It works in alpha.9-3 if that helps you narrow down what might have changed.

[jelbourn]

@crisbeto can you investigate this?

[crisbeto]

I couldn't reproduce it by sticking the tab demos into a dialog. @starksds can you post your HTML?

[starksds]

@crisbeto our app has a mix of bootstrap 4 and material 2 components since your components weren't finished when we started so that might be causing the issue.

Could you provide a plunker for your test case that I could try to implement in our app?

[crisbeto]

@starksds I tried taking the various examples from here and putting them into the dialog demo here.

[chpasha]

I have the same issue without using dialog, I have many pages with tabs, but only two of them get stuck with 11-3 AS SOON AS I add more than one tab and all work fine with 10. Chrome tab gets stuck and consumes memory indefinitely until I kill the tab with task manager. I'll try to figure out how those two pages differ from the rest (the rest of pages was stuck as well after upgrade, which was caused by changing the selectedIndex variable, the solution was to change in setTimeout, but not for those two pages, where variable is not changed in code)

[chpasha]

I think I found a workaround and possibly a way to reproduce issue. I have a pure (without any code) component which is still stuck when having more than one tab. The only anomaly about this component is that it is in a lazily loaded module. As soon as I place the component in the entry module, everything works fine - so I thought something is not getting initialized when the component is lazily loaded. And then I placed the tab group in the div with *ngIf="isComponentLoaded" which is set to true only in ngAfterViewInit and guess what? It's working. If the variable is set in ngOnInit - the tab is stuck, there is something that is missing until component is fully initialized and after that it is safe to create the tabs, but not before that. I hope this information is enough to somehow reproduce the issue or make a guess about it's cause

[crisbeto]

I still can't reproduce it @chpasha. I'm using a lazy-loaded module, but it still works fine. Here's what the entire setup looks like:

lazy.module.ts

import { NgModule } from '@angular/core';
import { MaterialModule } from '@angular/material';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
  imports: [routing, MaterialModule.forRoot()],
  declarations: [LazyComponent]
})
export class LazyModule {}

lazy.routing.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

const routes: Routes = [
  { path: '', component: LazyComponent }
];

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

lazy.component.ts

import { Component } from '@angular/core';

@Component({
  template: `
    <md-tab-group md-dynamic-height>
      <md-tab>
        <template md-tab-label>Tab one</template>
        <!-- some lipsum goes here -->
      </md-tab>

      <md-tab>
        <template md-tab-label>Tab one</template>
        <!-- some lipsum goes here -->
      </md-tab>
    </md-tab-group>
  `
})
export class LazyComponent {}

Can you post what your HTML looks like?

[chpasha]

it is pure md-tab-group from documentation without anything, like
<md-tab-group > <md-tab label="one"> </md-tab> <md-tab label="two"> </md-tab> </md-tab-group>

what part of you example makes the module lazy?
this is lazy
{ path: "myurl", loadChildren: 'app/lazy.module#LazyModule' }

[crisbeto]

It's the loadChildren parameter, instead of the usual component.

[chpasha]

you mean you do have loadChildren don't you?

[crisbeto]

Yes, I forgot to paste in that part since it's in the main module, but it looks like this:

{path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule'}