-
Notifications
You must be signed in to change notification settings - Fork 6.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Sort] Programatically setting active/direction does not update UI #10242
Comments
I'm seeing the same issue. Works in 5.1.0, does not in 5.2.*. |
Same issue here, it's kinda deal breaker, as you cannot set values dynamically or imperatively. I'm currently implementing a data table which reflects state to URL via query params, everything works ( even pagination set dynamically, cannot say the same for sort ) doesn't work with 5.2.5 nor 6.x demo: |
Encountering this as well in 6.0.0. |
Has there been any update to this? |
same here!! Is a very important feature and is not working. https://stackblitz.com/edit/angular-owjp47?file=app/sort-overview-example.html |
6.3.3 - bug still here: https://stackblitz.com/edit/angular-a4yakd |
Could be usefull when reflect state to URL via query params. |
Any update on this? |
I spent some time debugging this. Here are my observations: When you click on a However, when you programmatically call I believe this is an issue on I managed to make it work with the following ugly hack: this.matSort.sort({
id: <value>,
start: <direction>,
disableClear: true,
});
// ugly hack!
const activeSortHeader = this.matSort.sortables.get(value);
activeSortHeader['_setAnimationTransitionState']({
fromState: <direction>,
toState: 'active',
}); https://stackblitz.com/edit/angular-vuvckf?file=app%2Ftable-overview-example.ts References: |
Fix mat-sort-header arrow not displaying after sorting programmatically (eg. `matSort.sort()`) Related to angular#10242, angular#12754
Does not work with v7.0.0 |
v7.0.3 works perfectly |
I believe the original intent of this issue was that mat-sort does not respond to programatic changes in active and direction. The discussion on this issue seems to be assuming that the sorting is done by calling the stackblitz that shows the issue I am talking about has this issue been fully changed to just be about the header not updating? If so, I will create a new issue for updating sort via |
Still not working in version 7.1.0, arrow doesn't update showing the wrong sort column. |
Hi guys, any update on this one? |
Hello everyone, does anyone know how the input properties "matSortActive" and "matSortDirection" for the matSort directive work. When I set them the respective sort arrow is not updated. It would be nice to update the sort arrows with the help of observables using these two input properties. |
v7.1.1 - still not working. |
not working y.y |
this resets matSort UI without triggering server requests. |
Well, this is basically the same solution as @austin5456 provided but remains a workaround and should not be necessary in a perfect world. |
The ArrowIcon is set in the clickhandler of matSortHeader. Is see only two ugly hacks.
or call You can use something like this.
and public setSort(id: string, start?: 'asc' | 'desc') {
start = start || 'asc';
const matSort = this.dataSource.sort;
const toState = 'active';
const disableClear = false;
//reset state so that start is the first sort direction that you will see
matSort.sort({ id: null, start, disableClear });
matSort.sort({ id, start, disableClear });
//ugly hack
(matSort.sortables.get(id) as MatSortHeader)._setAnimationTransitionState({ toState });
} |
@Anderman that is very similar to what I have been using for a few months: import { Component, AfterViewInit, OnDestroy } from '@angular/core';
import { Sort, MatSort, MatSortHeader } from '@angular/material';
import { Subject, Observable, of } from 'rxjs';
import {
catchError,
distinctUntilChanged,
map,
takeUntil,
withLatestFrom,
} from 'rxjs/operators';
@Component({
// ...
})
export class MyComponent implements AfterViewInit, OnDestroy {
@ViewChild(MatSort) matSort: MatSort;
private destroyed$ = new Subject<void>();
private sort$: Observable<Sort>;
ngAfterViewInit() {
// HACK: fix sort header arrow after programmatically changing sort order
// https://github.com/angular/material2/issues/10242
// TODO: Remove this hack when the bug is fixed on @angular/material
this.matSort._stateChanges
.pipe(
withLatestFrom(this.sort$),
map(([_, sort]) => sort),
takeUntil(this.destroyed$),
catchError(error => {
return of(error);
})
)
.subscribe((sort: Sort) => {
const sortables = this.matSort.sortables;
const activeSortHeader = <MatSortHeader>(
sortables.get(sort.active)
);
activeSortHeader._setAnimationTransitionState({
fromState: activeSortHeader._arrowDirection,
toState: 'active',
});
});
}
ngOnDestroy() {
this.destroyed$.next();
this.destroyed$.complete();
}
} |
@adgoncal In some messages the problem seems to be solved or suggests other solutions that do not work. I spent to much time on this problem by trying some of those solutions. At least it was not clear for me how to make a workarond. |
Hi Andrew @andrewseguin :) API reveals In SortHeaderComponent, there are two places, where UI is updated.
To fix this, we just need to move most of the click handler logic to subscription logic, as it is also called, becase click handler calls that So we can move this logic from click handler: // Do not show the animation if the header was already shown in the right position.
if (this._viewState.toState === 'hint' || this._viewState.toState === 'active') {
this._disableViewStateAnimation = true;
}
// If the arrow is now sorted, animate the arrow into place. Otherwise, animate it away into
// the direction it is facing.
const viewState: ArrowViewStateTransition = this._isSorted() ?
{fromState: this._arrowDirection, toState: 'active'} :
{fromState: 'active', toState: this._arrowDirection};
this._setAnimationTransitionState(viewState); To subscription handler after these lines if (this._isSorted()) {
this._updateArrowDirection();
} and run it only when condition There propably needs to be one more condition or something. but the main idea is that this is actually really easy fix for the most wanted issue of Sort component. Thanks for considering this and thanks for your hard work at Angular team, this product is amazing! :) |
This problem still persists. Pinging to get it attention. |
Just spent 2 days trying to get a server-side change to update the UI. It only worked if the user clicked on a sort arrow. JayAhn2's code describes the problem as I see it and provides a workaround that worked immediately. Hope this gets addressed at some stage. Cheers. |
Setting the variables sortActive and sortDirection in the component does the job for me. It updates the arrow as well. v9.1+ |
@lukekroon It doesn't work in the same scenario as the original bug, which is code in the callback of .subscribe() https://stackblitz.com/edit/angular-material2-issue-qjaqm4?file=app%2Fapp.component.ts |
I have tried with the below snippet and it is working as expected. Once the state of the material table is set, then executing it made the UI to update the sort arrow. Using angular material version 7.3.7
|
Still facing this issue with angular material v10.0.1. @andrewseguin any update on a possible fix? |
@Nikkio in my case only with using this.sort.sortChange.emit(); works. Thanks |
Hi everyone, I've found probably the easiest workaround for this issue. The only side effect is that it requires the table to be redrawn when sort changes, but it's extremely simple to implement and works in most cases.
When ever you change the I find this solution is better future proofed, because when they later fix this issue, then you can just remove the I tried many of the above hacks, but suffered from many other side effects in my source code from trying to handle both external and internal sort change events. The above hack solves those issues, because |
Still an issue in 10.2.4 |
Can someone confirm this works in v11? edit: this is still an issue in v 11.2.0 |
angular 11.2.6 works better but still there is a little problem with refresh ui after model Issue:
Description:
calling this method sometimes triggers ui changes, sometimes not. |
I had a repaint issue. This solved it for me:
|
Still an issue in 13.1.3 |
Would be great if this could be fixed |
Hold your horses, it's only been 4 years. |
Wow, this is still an issue.. :´( |
I have a table with sorting, filtering, tabs, pagination with server where it is run by URL being source of truth. Everything works but this bug is ruining all it's potential. I wonder what's stopping its implementation. |
setTimeout(() => { this.dataSource.sort = this.sort; }, 100); |
If you really want to rely on |
Guys, any plans for this bug? 👀 |
bump |
…ection change Fixes that the sort header's state wasn't updating the when active column or the direction changed automatically. Fixes angular#10242.
…ection change Fixes that the sort header's state wasn't updating the when active column or the direction changed automatically. Fixes angular#10242.
Upgrading from Angular 7 to 15 broke my mat-table's programmatically determined sort. I tried many things, but in the end I fixed my programmatically generated sort by changing
to
No |
Bug, feature request, or proposal:
I'm programmatically setting the active and direction on matSort, but it's not updating the UI
What is the expected behavior?
programmatically setting the active and direction on matSort updates the UI
What is the current behavior?
programmatically setting the active and direction on matSort, but it's not updating the UI
What are the steps to reproduce?
https://stackblitz.com/edit/angular-material2-issue-mc4cve?file=app/app.component.ts
What is the use-case or motivation for changing an existing behavior?
I believe this is a regression. This was working in 5.1.0
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?
The text was updated successfully, but these errors were encountered: