fix(material/list): Do not rely on input binding order

This change ensures that setting `value` does not clear the `selected`
input until after the first change detection cycle. Ivy sets inputs
based on the order they appear in the templates.

Fixes #17500

Author: atscott

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

@@ -1191,6 +1191,18 @@ describe('MatSelectionList with forms', () => {
       expect(testComponent.optionInstances.toArray()[1].selected).toBe(true);
     }));
   });
+
+  it('can bind both selected and value at the same time', () => {
+    const fixture =
+        TestBed
+            .configureTestingModule(
+                {imports: [MatListModule], declarations: [SelectionListWithSelectedOptionAndValue]})
+            .createComponent(SelectionListWithSelectedOptionAndValue);
+    fixture.detectChanges();
+    const listItemEl = fixture.debugElement.query(By.directive(MatListOption))!;
+    expect(listItemEl.componentInstance.selected).toBe(true);
+    expect(listItemEl.componentInstance.value).toBe(fixture.componentInstance.itemValue);
+  });
 });
 
 
@@ -1277,6 +1289,16 @@ class SelectionListWithDisabledOption {
 class SelectionListWithSelectedOption {
 }
 
+@Component({
+  template: `
+  <mat-selection-list>
+    <mat-list-option [selected]="true" [value]="itemValue">Item</mat-list-option>
+  </mat-selection-list>`
+})
+class SelectionListWithSelectedOptionAndValue {
+  itemValue = 'item1';
+}
+
 @Component({template: `
   <mat-selection-list id="selection-list-4">
     <mat-list-option checkboxPosition="after" class="test-focus" id="123">

src/material/list/selection-list.ts

@@ -10,14 +10,14 @@ import {FocusableOption, FocusKeyManager} from '@angular/cdk/a11y';
 import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
 import {
-  SPACE,
+  A,
+  DOWN_ARROW,
+  END,
   ENTER,
+  hasModifierKey,
   HOME,
-  END,
+  SPACE,
   UP_ARROW,
-  DOWN_ARROW,
-  A,
-  hasModifierKey,
 } from '@angular/cdk/keycodes';
 import {
   AfterContentInit,
@@ -32,25 +32,27 @@ import {
   forwardRef,
   Inject,
   Input,
+  OnChanges,
   OnDestroy,
   OnInit,
   Output,
   QueryList,
+  SimpleChanges,
   ViewChild,
   ViewEncapsulation,
-  SimpleChanges,
-  OnChanges,
 } from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {
-  CanDisableRipple, CanDisableRippleCtor,
+  CanDisableRipple,
+  CanDisableRippleCtor,
   MatLine,
-  setLines,
   mixinDisableRipple,
+  setLines,
   ThemePalette,
 } from '@angular/material/core';
-import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
 import {Subject} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
+
 import {MatListAvatarCssMatStyler, MatListIconCssMatStyler} from './list';
 
 
@@ -114,9 +116,10 @@ export class MatSelectionListChange {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MatListOption extends _MatListOptionMixinBase
-    implements AfterContentInit, OnDestroy, OnInit, FocusableOption, CanDisableRipple {
-
+export class MatListOption extends _MatListOptionMixinBase implements AfterContentInit, OnChanges,
+                                                                      OnDestroy, OnInit,
+                                                                      FocusableOption,
+                                                                      CanDisableRipple {
   private _selected = false;
   private _disabled = false;
   private _hasFocus = false;
@@ -137,11 +140,16 @@ export class MatListOption extends _MatListOptionMixinBase
   set color(newValue: ThemePalette) { this._color = newValue; }
   private _color: ThemePalette;
 
+  /**
+   * This is set to true after the first OnChanges cycle so we don't clear the value of `selected`
+   * in the first cycle.
+   */
+  private _inputsInitialized = false;
   /** Value of the option */
   @Input()
   get value(): any { return this._value; }
   set value(newValue: any) {
-    if (this.selected && newValue !== this.value) {
+    if (this.selected && newValue !== this.value && this._inputsInitialized) {
       this.selected = false;
     }
 
@@ -202,6 +210,10 @@ export class MatListOption extends _MatListOptionMixinBase
     });
   }
 
+  ngOnChanges() {
+    this._inputsInitialized = true;
+  }
+
   ngAfterContentInit() {
     setLines(this._lines, this._element);
   }