fix(list): matching item not preselected if added after init

Fixes a `mat-list-option` that is added after initialization not being selected, even if it matches the control value.

Fixes #16062.

Author: crisbeto

src/material/list/selection-list.spec.ts

@@ -1098,6 +1098,21 @@ describe('MatSelectionList with forms', () => {
       expect(fixture.componentInstance.formControl.value).toEqual(['opt2']);
     }));
 
+    it('should mark options added at a later point as selected', fakeAsync(() => {
+      fixture.componentInstance.formControl.setValue(['opt4']);
+      fixture.detectChanges();
+
+      fixture.componentInstance.renderExtraOption = true;
+      fixture.detectChanges();
+      tick();
+
+      listOptions = fixture.debugElement.queryAll(By.directive(MatListOption))
+        .map(optionDebugEl => optionDebugEl.componentInstance);
+
+      expect(listOptions.length).toBe(4);
+      expect(listOptions[3].selected).toBe(true);
+    }));
+
   });
 
   describe('preselected values', () => {
@@ -1285,12 +1300,14 @@ class SelectionListWithModel {
       <mat-list-option value="opt1">Option 1</mat-list-option>
       <mat-list-option value="opt2">Option 2</mat-list-option>
       <mat-list-option value="opt3">Option 3</mat-list-option>
+      <mat-list-option value="opt4" *ngIf="renderExtraOption">Option 4</mat-list-option>
     </mat-selection-list>
   `
 })
 class SelectionListWithFormControl {
   formControl = new FormControl();
   renderList = true;
+  renderExtraOption = false;
 }
 
 

src/material/list/selection-list.ts

@@ -49,7 +49,8 @@ import {
   ThemePalette,
 } from '@angular/material/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
-import {Subscription} from 'rxjs';
+import {Subject} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
 import {MatListAvatarCssMatStyler, MatListIconCssMatStyler} from './list';
 
 
@@ -103,8 +104,8 @@ export class MatSelectionListChange {
     // its theme. The accent theme palette is the default and doesn't need to be set.
     '[class.mat-primary]': 'color === "primary"',
     '[class.mat-warn]': 'color === "warn"',
-    '[attr.aria-selected]': 'selected.toString()',
-    '[attr.aria-disabled]': 'disabled.toString()',
+    '[attr.aria-selected]': 'selected',
+    '[attr.aria-disabled]': 'disabled',
   },
   templateUrl: 'list-option.html',
   encapsulation: ViewEncapsulation.None,
@@ -359,17 +360,17 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
   /** View to model callback that should be called whenever the selected options change. */
   private _onChange: (value: any) => void = (_: any) => {};
 
-  /** Used for storing the values that were assigned before the options were initialized. */
-  private _tempValues: string[]|null;
+  /** Keeps track of the currently-selected value. */
+  private _value: string[]|null;
 
-  /** Subscription to sync value changes in the SelectionModel back to the SelectionList. */
-  private _modelChanges = Subscription.EMPTY;
+  /** Emits when the list has been destroyed. */
+  private _destroyed = new Subject<void>();
 
   /** View to model callback that should be called if the list or its options lost focus. */
   _onTouched: () => void = () => {};
 
   /** Whether the list has been destroyed. */
-  private _destroyed: boolean;
+  private _isDestroyed: boolean;
 
   constructor(private _element: ElementRef<HTMLElement>, @Attribute('tabindex') tabIndex: string) {
     super();
@@ -385,13 +386,22 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
       .skipPredicate(() => false)
       .withAllowedModifierKeys(['shiftKey']);
 
-    if (this._tempValues) {
-      this._setOptionsFromValues(this._tempValues);
-      this._tempValues = null;
+    if (this._value) {
+      this._setOptionsFromValues(this._value);
     }
 
+    this.options.changes.pipe(takeUntil(this._destroyed)).subscribe(() => {
+      if (this._value) {
+        // Needs to be deferred, because we're changing bindings as the result of a query
+        // change which results in a "Changed after checked error".
+        Promise.resolve().then(() => {
+          this._setOptionsFromValues(this._value || []);
+        });
+      }
+    });
+
     // Sync external changes to the model back to the options.
-    this._modelChanges = this.selectedOptions.onChange.subscribe(event => {
+    this.selectedOptions.onChange.pipe(takeUntil(this._destroyed)).subscribe(event => {
       if (event.added) {
         for (let item of event.added) {
           item.selected = true;
@@ -417,8 +427,9 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
   }
 
   ngOnDestroy() {
-    this._destroyed = true;
-    this._modelChanges.unsubscribe();
+    this._destroyed.next();
+    this._destroyed.complete();
+    this._isDestroyed = true;
   }
 
   /** Focuses the selection list. */
@@ -504,8 +515,10 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
     // Stop reporting value changes after the list has been destroyed. This avoids
     // cases where the list might wrongly reset its value once it is removed, but
     // the form control is still live.
-    if (this.options && !this._destroyed) {
-      this._onChange(this._getSelectedOptionValues());
+    if (this.options && !this._isDestroyed) {
+      const value = this._getSelectedOptionValues();
+      this._onChange(value);
+      this._value = value;
     }
   }
 
@@ -516,10 +529,10 @@ export class MatSelectionList extends _MatSelectionListMixinBase implements Focu
 
   /** Implemented as part of ControlValueAccessor. */
   writeValue(values: string[]): void {
+    this._value = values;
+
     if (this.options) {
       this._setOptionsFromValues(values || []);
-    } else {
-      this._tempValues = values;
     }
   }