fix(material/select): option active styling not removed when value is changed programmatically

If an option is selected by the user and the value is changed programmatically afterwards, we weren't removing the
active state from the previous option. This seems to be a regression from #19970.

These changes resolve the issue and preserve the fix from #19970 by resetting the
active styling manually.

Author: crisbeto

src/material-experimental/mdc-select/select.spec.ts

@@ -1098,6 +1098,39 @@ describe('MDC-based MatSelect', () => {
           expect(options[1].getAttribute('aria-disabled')).toEqual('false');
           expect(options[2].getAttribute('aria-disabled')).toEqual('false');
         }));
+
+        it('should remove the active state from options that have been deselected while closed',
+          fakeAsync(() => {
+            let activeOptions = options.filter(option => {
+              return option.classList.contains('mat-mdc-option-active');
+            });
+            expect(activeOptions).toEqual([options[0]],
+                'Expected first option to have active styles.');
+
+            options[1].click();
+            fixture.detectChanges();
+            trigger.click();
+            fixture.detectChanges();
+            flush();
+
+            activeOptions = options.filter(option => {
+              return option.classList.contains('mat-mdc-option-active');
+            });
+            expect(activeOptions).toEqual([options[1]],
+              'Expected only selected option to be marked as active after it is clicked.');
+
+            fixture.componentInstance.control.setValue(fixture.componentInstance.foods[7].value);
+            fixture.detectChanges();
+            trigger.click();
+            fixture.detectChanges();
+            flush();
+
+            activeOptions = options.filter(option => {
+              return option.classList.contains('mat-mdc-option-active');
+            });
+            expect(activeOptions).toEqual([options[7]],
+              'Expected only selected option to be marked as active after the value has changed.');
+          }));
       });
 
       describe('for option groups', () => {

src/material/select/select.spec.ts

@@ -1066,6 +1066,33 @@ describe('MatSelect', () => {
           expect(options[1].getAttribute('aria-disabled')).toEqual('false');
           expect(options[2].getAttribute('aria-disabled')).toEqual('false');
         }));
+
+        it('should remove the active state from options that have been deselected while closed',
+          fakeAsync(() => {
+            let activeOptions = options.filter(option => option.classList.contains('mat-active'));
+            expect(activeOptions).toEqual([options[0]],
+                'Expected first option to have active styles.');
+
+            options[1].click();
+            fixture.detectChanges();
+            trigger.click();
+            fixture.detectChanges();
+            flush();
+
+            activeOptions = options.filter(option => option.classList.contains('mat-active'));
+            expect(activeOptions).toEqual([options[1]],
+              'Expected only selected option to be marked as active after it is clicked.');
+
+            fixture.componentInstance.control.setValue(fixture.componentInstance.foods[7].value);
+            fixture.detectChanges();
+            trigger.click();
+            fixture.detectChanges();
+            flush();
+
+            activeOptions = options.filter(option => option.classList.contains('mat-active'));
+            expect(activeOptions).toEqual([options[7]],
+              'Expected only selected option to be marked as active after the value has changed.');
+          }));
       });
 
       describe('for option groups', () => {

src/material/select/select.ts

@@ -813,16 +813,17 @@ export abstract class _MatSelectBase<C> extends _MatSelectMixinBase implements A
    * found with the designated value, the select trigger is cleared.
    */
   private _setSelectionByValue(value: any | any[]): void {
+    this._selectionModel.selected.forEach(option => option.setInactiveStyles());
+    this._selectionModel.clear();
+
     if (this.multiple && value) {
       if (!Array.isArray(value) && (typeof ngDevMode === 'undefined' || ngDevMode)) {
         throw getMatSelectNonArrayValueError();
       }
 
-      this._selectionModel.clear();
       value.forEach((currentValue: any) => this._selectValue(currentValue));
       this._sortValues();
     } else {
-      this._selectionModel.clear();
       const correspondingOption = this._selectValue(value);
 
       // Shift focus to the active item. Note that we shouldn't do this in multiple