[Table] Sort arrows are not rendered properly in tabs

[kevincaradant]

Bug, feature request, or proposal:

BUG
Plunker: https://plnkr.co/edit/Idc73Kn0ViLI4Qpsp98g?p=preview

When you set your sort by default as ASC or DESC like that:

@ViewChild(MatSort) mdSort: MatSort;

ngOnInit() {this.mdSort.start = 'desc';}

The arrow is just ugly ( 2 times on 3 ). If you click again on the sort icon, it's pretty :)

BTW: Under IE11 it's always ugly. Same issue or not I don't know

What is the current behavior?

What is the expected behavior?

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

Angular 4.4.3
OS: Windows 7 Pro 64 bits
TS: 2.4.1
Material: 2.0.0-beta.11
Browser: Chrome V60

Is there anything else we should know?

Nothing #

[andrewseguin]

I was able to reproduce the issue and I suspect what is happening here is that you are setting an invalid direction (e.g. ascending instead of asc)

Plunker to show issue: https://plnkr.co/edit/vf61Yr6tvDtOlKRr9zeN?p=preview

Can you verify that this was the issue?

Adding PR #7378 that will throw an error if the direction is invalid.

[kevincaradant]

Hi

Good try, but I think it's not the problem.

In fact, I found something interesting. It's when I use a <md-tab> and if my <md-table> is not in the first tab (loaded on the load of the page), the initialization of arrow is bad. Sorry I didn't have the time to do a plunker now ( if you don't understand, I will try to do it begining with yours ) but the idea is something like that:

<mat-tab-group *ngIf="accountExist">
    <mat-tab label="{{'USER' | translate}}">
        <mat-card fxLayout="column">
          <mat-card-content>
            <app-info-user></app-info-user>  // my first <md-table> is inside this component
          </mat-card-content>
        </mat-card>
    </mat-tab>

    <mat-tab label="{{'FAMILY' | translate}}">
        <mat-card fxLayout="column">
          <mat-card-content>
            <app-families-user></app-families-user> // my second <md-table> is inside this component
          </mat-card-content>
        </mat-card>
    </mat-tab>
</mat-tab-group>

The second table "families" will have a ugly arrow even with with a sort "asc" or "desc"

[kevincaradant]

@andrewseguin , Have you seen my previous message, why this issue is closed ?

It's not the same problem, so the solution mentioned in your PR will throw only the error but I will continue to get this error because the name "asc" is correct. For me, it's just link to the <md-table> which is included in a <md-tab> :)

Regards

NB: I will try to do a plunkr

[andrewseguin]

Hey yeah - let's open this back up to figure out what's going on. Sounds like perhaps animations isn't firing off.

Definitely try and get a plunker going so we can dive into this. Thanks

[kevincaradant]

This is the plunker :)

https://plnkr.co/edit/Idc73Kn0ViLI4Qpsp98g?p=preview

Go on the second tab => "family"

[andrewseguin]

Great thanks for the repro. Looks like the states are being set properly but the animations framework isn't animating the arrow. I'll talk to the core animations guy to see if we can dive into this and see why it's not triggering.