fix(list): determine if option value changed (#19828) (#19870)

When the value of a `mat-list-option` is updated, the `mat-selection-list` `compareWith` function should be used to compare the new value with the old value. This prevents options from being incorrectly unselected when the option value is updated.

(cherry picked from commit f9c5ffe)

Author: swseverance

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

@@ -814,6 +814,39 @@ describe('MatSelectionList without forms', () => {
     });
   });
 
+  describe('with changing option value', () => {
+    let fixture: ComponentFixture<SelectionListWithChangingOptionValue>;
+    let selectionList: MatSelectionList;
+    let listOption: MatListOption;
+
+    beforeEach(async(() => {
+      TestBed.configureTestingModule({
+        imports: [MatListModule],
+        declarations: [SelectionListWithChangingOptionValue],
+      });
+
+      TestBed.compileComponents();
+    }));
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(SelectionListWithChangingOptionValue);
+      fixture.detectChanges();
+
+      selectionList = fixture.debugElement.query(By.directive(MatSelectionList))!.componentInstance;
+      listOption = fixture.debugElement.query(By.directive(MatListOption))!.componentInstance;
+    });
+
+    it('should use `compareWith` function when updating option selection state', () => {
+      expect(selectionList.selectedOptions.isSelected(listOption)).toBeTrue();
+      fixture.componentInstance.value = {id: 1};
+      fixture.detectChanges();
+      expect(selectionList.selectedOptions.isSelected(listOption)).toBeTrue();
+      fixture.componentInstance.value = {id: 2};
+      fixture.detectChanges();
+      expect(selectionList.selectedOptions.isSelected(listOption)).toBeFalse();
+    });
+  });
+
   describe('with option disabled', () => {
     let fixture: ComponentFixture<SelectionListWithDisabledOption>;
     let listOptionEl: HTMLElement;
@@ -1678,6 +1711,20 @@ class SelectionListWithCustomComparator {
 }
 
 
+@Component({
+  template: `
+    <mat-selection-list [compareWith]="compareWith">
+      <mat-list-option [value]="value" [selected]="value.id === 1">
+        One
+      </mat-list-option>
+    </mat-selection-list>`
+})
+class SelectionListWithChangingOptionValue {
+  compareWith = (o1: any, o2: any) => o1 && o2 && o1.id === o2.id;
+  value = {id: 1};
+}
+
+
 @Component({
   template: `
     <mat-selection-list>

src/material/list/selection-list.ts

@@ -145,7 +145,11 @@ export class MatListOption extends _MatListOptionMixinBase implements AfterConte
   @Input()
   get value(): any { return this._value; }
   set value(newValue: any) {
-    if (this.selected && newValue !== this.value && this._inputsInitialized) {
+    if (
+      this.selected &&
+      !this.selectionList.compareWith(newValue, this.value) &&
+      this._inputsInitialized
+    ) {
       this.selected = false;
     }