Angular material table sort arrow not resetting to original state

[nasrulbharathi]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

In the Angular material table, When I click on the sort icon in one of the table headers to descending then I am clicking on another table header then the data in the table get updated but in UI the previous column sort icon is not changing until I am hovering the mouse in the particular column header.

In the example, I sorted the 1st column "ID" into descending and then I clicked on the 3rd column "Progress" sort icon. The data got updated perfectly but the icon in the 1st column didn't change. It got updated when I hover the mouse on the ID.

Working Demo:

https://stackblitz.com/edit/angular-cbr9nv?file=src%2Fstyles.scss,src%2Fapp%2Ftable-overview-example.html,src%2Fapp%2Ftable-overview-example.css

Reproduction

Steps to reproduce:

1. Make the sort icons in the table header always visible.
2. Click the sort icon to descending in 1st column.
3. Click on the sort icon to descending in the 3rd column
4. Now you can see the 1st column icon is not updated until you are manually hovering.
5. Stackblitz: https://stackblitz.com/edit/angular-cbr9nv?file=src%2Fstyles.scss,src%2Fapp%2Ftable-overview-example.html,src%2Fapp%2Ftable-overview-example.css
   the

Expected Behavior

When sorting on another column is pressed then the sorting on the previous column should get updated without manually hovering

Actual Behavior

The previous sorting column icon is not updated until manually hovering in table header

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):