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

… changed programmatically (#20649)

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.

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