fix(material/table): data source filteredData not updating while disc…

…onnected (#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.

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

@@ -65,6 +65,16 @@ describe('MatTableDataSource', () => {
       dataSource.connect();
       expect(spy).toHaveBeenCalledTimes(1);
     });
+
+    it('should update filteredData even if the data source is disconnected', () => {
+      dataSource.data = [1, 2, 3, 4, 5];
+      expect(dataSource.filteredData).toEqual([1, 2, 3, 4, 5]);
+
+      dataSource.disconnect();
+      dataSource.data = [5, 4, 3, 2, 1];
+      expect(dataSource.filteredData).toEqual([5, 4, 3, 2, 1]);
+    });
+
   });
 });
 

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

@@ -65,14 +65,28 @@ export class _MatTableDataSource<T, P extends Paginator> extends DataSource<T> {
 
   /** Array of data that should be rendered by the table, where each object represents one row. */
   get data() { return this._data.value; }
-  set data(data: T[]) { this._data.next(data); }
+  set data(data: T[]) {
+    this._data.next(data);
+    // Normally the `filteredData` is updated by the re-render
+    // subscription, but that won't happen if it's inactive.
+    if (!this._renderChangesSubscription) {
+      this._filterData(data);
+    }
+  }
 
   /**
    * Filter term that should be used to filter out objects from the data array. To override how
    * data objects match to this filter string, provide a custom function for filterPredicate.
    */
   get filter(): string { return this._filter.value; }
-  set filter(filter: string) { this._filter.next(filter); }
+  set filter(filter: string) {
+    this._filter.next(filter);
+    // Normally the `filteredData` is updated by the re-render
+    // subscription, but that won't happen if it's inactive.
+    if (!this._renderChangesSubscription) {
+      this._filterData(this.data);
+    }
+  }
 
   /**
    * Instance of the MatSort directive used by the table to control its sorting. Sort changes