[Sort] Arrow does not display correctly inside a menu item

[adgoncal]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Arrow should display

What is the current behavior?

MatSortHeader arrow has wrong shape the first time the menu opens, and disappears if you click on a menu item or close and reopen the menu.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-cybhi8-hm3g5s?file=app%2Fsort-overview-example.html

Step 1: Open menu. The arrow shape is wrong.
Step 2: Either close the menu or click one of the menu items. Reopen menu and the arrow is gone.

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

Angular: 5
Material: 5

[adgoncal]

I forked the stackblitz to update to Material 5.2. The arrow is still not displayed correctly, but the behavior has changed. Now, both sort headers display the arrow at all times and the arrow still looks like a T. Additionally, hovering the mouse over the inactive sort header causes its arrow to blink.

https://stackblitz.com/edit/angular-cybhi8-tmntv4?file=app/sort-overview-example.html

[JustACodeMonkey]

+1
I'm seeing the same thing on tables that exist within tabs. The table on the initial tab works fine, but the table on the 2nd tab has the T symbol beside each of the sortable column headers. Hovering over the header will remove the T when the mouse if moved away, but when you hover again, the T is shown (instead of an up or down arrow). Once a header item has been clicked three times (to remove the sort), hovering will show the arrow correctly (and not the T).

Was searching through the open issues and it looks like pull request #8921 will fix this issue. Hopefully it's released soon.

[andrewseguin]

This is an Angular issue when content with animations is created without being on the page when initialized. We've added a mechanism to lazy-load content in tabs but this is the first I've seen this in the menu. We are hoping to re-work the sort animation (again) with some latest-and-greatest animations logic, but it will be likely be several months away before we get to this.

[isurendrasingh]

This will work just add these in css

::ng-deep .mat-sort-header-arrow.ng-trigger.ng-trigger-arrowPosition {
opacity: 0;
}

::ng-deep .mat-sort-header-pointer-left.ng-trigger.ng-trigger-leftPointer{
transform: rotate(-45deg);
}
::ng-deep .mat-sort-header-pointer-right.ng-trigger.ng-trigger-rightPointer{
transform: rotate(45deg);
}

[JustACodeMonkey]

@isurendrasingh Interesting. But it isn't working for me with Angular 5.2.9 and Material 5.2.4

[megaterrarc]

the same is true for mat-table with any animation