Skip to content

Commit afdec6f

Browse files
crisbetoannieyw
authored andcommitted
fix(material/table): data source filteredData not updating while disconnected (#22058)
The data source was changed in #21338 so that it unsubscribes while it's disconnected. The problem is that the subscription has a side effect which updates `filteredData` as well. These changes add some logic so that `filteredData` is updated even if the source is disconnected. Fixes #21984. (cherry picked from commit 0093105)
1 parent 4c69d18 commit afdec6f

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

src/material/table/table-data-source.spec.ts

+10
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,16 @@ describe('MatTableDataSource', () => {
6565
dataSource.connect();
6666
expect(spy).toHaveBeenCalledTimes(1);
6767
});
68+
69+
it('should update filteredData even if the data source is disconnected', () => {
70+
dataSource.data = [1, 2, 3, 4, 5];
71+
expect(dataSource.filteredData).toEqual([1, 2, 3, 4, 5]);
72+
73+
dataSource.disconnect();
74+
dataSource.data = [5, 4, 3, 2, 1];
75+
expect(dataSource.filteredData).toEqual([5, 4, 3, 2, 1]);
76+
});
77+
6878
});
6979
});
7080

src/material/table/table-data-source.ts

+16-2
Original file line numberDiff line numberDiff line change
@@ -65,14 +65,28 @@ export class _MatTableDataSource<T, P extends Paginator> extends DataSource<T> {
6565

6666
/** Array of data that should be rendered by the table, where each object represents one row. */
6767
get data() { return this._data.value; }
68-
set data(data: T[]) { this._data.next(data); }
68+
set data(data: T[]) {
69+
this._data.next(data);
70+
// Normally the `filteredData` is updated by the re-render
71+
// subscription, but that won't happen if it's inactive.
72+
if (!this._renderChangesSubscription) {
73+
this._filterData(data);
74+
}
75+
}
6976

7077
/**
7178
* Filter term that should be used to filter out objects from the data array. To override how
7279
* data objects match to this filter string, provide a custom function for filterPredicate.
7380
*/
7481
get filter(): string { return this._filter.value; }
75-
set filter(filter: string) { this._filter.next(filter); }
82+
set filter(filter: string) {
83+
this._filter.next(filter);
84+
// Normally the `filteredData` is updated by the re-render
85+
// subscription, but that won't happen if it's inactive.
86+
if (!this._renderChangesSubscription) {
87+
this._filterData(this.data);
88+
}
89+
}
7690

7791
/**
7892
* Instance of the MatSort directive used by the table to control its sorting. Sort changes

0 commit comments

Comments
 (0)