fix(material/select): active class not removed from reset option when new value is assigned through form control (#26414)

Fixes that we weren't removing the active class from a reset option when a new value is assigned through a `FormControl`. The problem was that we were removing the active classes only from selected options, but a reset option is never selected.

Fixes #26390.

Author: crisbeto

src/material/legacy-select/select.spec.ts

@@ -3361,12 +3361,14 @@ describe('MatSelect', () => {
   describe('with reset option and a form control', () => {
     let fixture: ComponentFixture<SelectWithResetOptionAndFormControl>;
     let options: HTMLElement[];
+    let trigger: HTMLElement;
 
     beforeEach(fakeAsync(() => {
       configureMatSelectTestingModule([SelectWithResetOptionAndFormControl]);
       fixture = TestBed.createComponent(SelectWithResetOptionAndFormControl);
       fixture.detectChanges();
-      fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement.click();
+      trigger = fixture.debugElement.query(By.css('.mat-select-trigger'))!.nativeElement;
+      trigger.click();
       fixture.detectChanges();
       options = Array.from(overlayContainerElement.querySelectorAll('mat-option'));
     }));
@@ -3394,6 +3396,22 @@ describe('MatSelect', () => {
       expect(fixture.componentInstance.select.value).toBe('a');
       expect(fixture.componentInstance.control.value).toBe('a');
     }));
+
+    it('should deselect the reset option when a value is assigned through the form control', fakeAsync(() => {
+      expect(options[0].classList).toContain('mat-active');
+
+      options[0].click();
+      fixture.detectChanges();
+      flush();
+
+      fixture.componentInstance.control.setValue('c');
+      fixture.detectChanges();
+      trigger.click();
+      fixture.detectChanges();
+
+      expect(options[0].classList).not.toContain('mat-active');
+      expect(options[3].classList).toContain('mat-active');
+    }));
   });
 
   describe('without Angular forms', () => {

src/material/select/select.spec.ts

@@ -3406,12 +3406,14 @@ describe('MDC-based MatSelect', () => {
   describe('with reset option and a form control', () => {
     let fixture: ComponentFixture<SelectWithResetOptionAndFormControl>;
     let options: HTMLElement[];
+    let trigger: HTMLElement;
 
     beforeEach(fakeAsync(() => {
       configureMatSelectTestingModule([SelectWithResetOptionAndFormControl]);
       fixture = TestBed.createComponent(SelectWithResetOptionAndFormControl);
       fixture.detectChanges();
-      fixture.debugElement.query(By.css('.mat-mdc-select-trigger'))!.nativeElement.click();
+      trigger = fixture.debugElement.query(By.css('.mat-mdc-select-trigger'))!.nativeElement;
+      trigger.click();
       fixture.detectChanges();
       options = Array.from(overlayContainerElement.querySelectorAll('mat-option'));
     }));
@@ -3439,6 +3441,22 @@ describe('MDC-based MatSelect', () => {
       expect(fixture.componentInstance.select.value).toBe('a');
       expect(fixture.componentInstance.control.value).toBe('a');
     }));
+
+    it('should deselect the reset option when a value is assigned through the form control', fakeAsync(() => {
+      expect(options[0].classList).toContain('mat-mdc-option-active');
+
+      options[0].click();
+      fixture.detectChanges();
+      flush();
+
+      fixture.componentInstance.control.setValue('c');
+      fixture.detectChanges();
+      trigger.click();
+      fixture.detectChanges();
+
+      expect(options[0].classList).not.toContain('mat-mdc-option-active');
+      expect(options[3].classList).toContain('mat-mdc-option-active');
+    }));
   });
 
   describe('without Angular forms', () => {

src/material/select/select.ts

@@ -837,7 +837,7 @@ export abstract class _MatSelectBase<C>
    * found with the designated value, the select trigger is cleared.
    */
   private _setSelectionByValue(value: any | any[]): void {
-    this._selectionModel.selected.forEach(option => option.setInactiveStyles());
+    this.options.forEach(option => option.setInactiveStyles());
     this._selectionModel.clear();
 
     if (this.multiple && value) {