angular / angular/components

Bug: matSortDirection will not work if matSortActive had changed in matSort directive.

Open
#12,754 6 comments 9 reactions 0 assignees View on GitHub
area: material/sort P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
**Bug!**

#### What is the expected behavior?
In the table element with sort-header - matSort directive - the properties **matSortActive** and **matSortDirection** will work independently.

#### What is the current behavior?
The **matSortDirection** property will work only if **matSortActive** didn't changed

#### What are the steps to reproduce?
1. Create a new Component. In it's template (html file) create a table element with **matSort** directive.
2. Add to this table the properties [matSortActive] and [matSortDirection] and bind them to variables in your Component
3. In the Component initialization (constructor or ngInit) set values for the variables binded to matSortActive and matSortDirection.
4. Add a method_1 that will update the matSortDirection only - **Verify:** The Sort-Arrow in the table's header appear in the right direction (asc/desc).
5. Add a method_2 that will update the matSortDirection **and** matSortActive - **Bug:** The Sort-Arrow in the table's header is missing!!!

Providing a StackBlitz reproduction is the *best* way to share your issue.

StackBlitz starter:

View and Edit: https://stackblitz.com/edit/angular-41eoff?file=main.ts

View Only: https://angular-41eoff.stackblitz.io

#### What is the use-case or motivation for changing an existing behavior?
Fixing the bug and providing a current behavior for these 2 properties (matSortActive and matSortDirection).

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
- Angular v6.1.3
- Material v6.4.5
- TypeScript v2.9.2
- Browsers: Tested in Chrome, Opera (maybe others).

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and the Angular Material matSort directive, then reproduce the case where matSortActive and matSortDirection change together. The fix is complete when changing both bound properties keeps the sort arrow visible in the requested direction, with a regression test covering that update.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.