fix(material/select): disabled state out of sync when swapping form g…

…roup with a disabled one (#17872)

Fixes the disabled state of a `mat-select` falling out of sync with its form control if the
control's group is swapped out with one that is disabled on init.

Fixes #17860.

(cherry picked from commit 723a821)

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

@@ -42,6 +42,7 @@ import {
 } from '@angular/core/testing';
 import {
   ControlValueAccessor,
+  FormBuilder,
   FormControl,
   FormGroup,
   FormGroupDirective,
@@ -123,6 +124,7 @@ describe('MDC-based MatSelect', () => {
           SelectWithGroupsAndNgContainer,
           SelectWithFormFieldLabel,
           SelectWithChangeEvent,
+          SelectInsideDynamicFormGroup,
         ]);
       }),
     );
@@ -2193,6 +2195,23 @@ describe('MDC-based MatSelect', () => {
           .withContext(`Expected select panelOpen property to become true.`)
           .toBe(true);
       }));
+
+      it(
+        'should keep the disabled state in sync if the form group is swapped and ' +
+          'disabled at the same time',
+        fakeAsync(() => {
+          const fixture = TestBed.createComponent(SelectInsideDynamicFormGroup);
+          fixture.detectChanges();
+          const instance = fixture.componentInstance;
+
+          expect(instance.select.disabled).toBe(false);
+
+          instance.assignGroup(true);
+          fixture.detectChanges();
+
+          expect(instance.select.disabled).toBe(true);
+        }),
+      );
     });
 
     describe('keyboard scrolling', () => {
@@ -5036,3 +5055,29 @@ class SelectWithResetOptionAndFormControl {
   `,
 })
 class SelectInNgContainer {}
+
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <mat-form-field>
+        <mat-select formControlName="control">
+          <mat-option value="1">One</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </form>
+  `,
+})
+class SelectInsideDynamicFormGroup {
+  @ViewChild(MatSelect) select: MatSelect;
+  form: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) {
+    this.assignGroup(false);
+  }
+
+  assignGroup(isDisabled: boolean) {
+    this.form = this._formBuilder.group({
+      control: {value: '', disabled: isDisabled},
+    });
+  }
+}

src/material/select/select.spec.ts

@@ -49,6 +49,7 @@ import {
   NG_VALUE_ACCESSOR,
   ReactiveFormsModule,
   Validators,
+  FormBuilder,
 } from '@angular/forms';
 import {ErrorStateMatcher, MatOption, MatOptionSelectionChange} from '@angular/material/core';
 import {
@@ -122,6 +123,7 @@ describe('MatSelect', () => {
           SelectWithGroupsAndNgContainer,
           SelectWithFormFieldLabel,
           SelectWithChangeEvent,
+          SelectInsideDynamicFormGroup,
         ]);
       }),
     );
@@ -2208,6 +2210,23 @@ describe('MatSelect', () => {
           .withContext(`Expected select panelOpen property to become true.`)
           .toBe(true);
       }));
+
+      it(
+        'should keep the disabled state in sync if the form group is swapped and ' +
+          'disabled at the same time',
+        fakeAsync(() => {
+          const fixture = TestBed.createComponent(SelectInsideDynamicFormGroup);
+          fixture.detectChanges();
+          const instance = fixture.componentInstance;
+
+          expect(instance.select.disabled).toBe(false);
+
+          instance.assignGroup(true);
+          fixture.detectChanges();
+
+          expect(instance.select.disabled).toBe(true);
+        }),
+      );
     });
 
     describe('animations', () => {
@@ -6017,3 +6036,29 @@ class SelectWithResetOptionAndFormControl {
   `,
 })
 class SelectInNgContainer {}
+
+@Component({
+  template: `
+    <form [formGroup]="form">
+      <mat-form-field>
+        <mat-select formControlName="control">
+          <mat-option value="1">One</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </form>
+  `,
+})
+class SelectInsideDynamicFormGroup {
+  @ViewChild(MatSelect) select: MatSelect;
+  form: FormGroup;
+
+  constructor(private _formBuilder: FormBuilder) {
+    this.assignGroup(false);
+  }
+
+  assignGroup(isDisabled: boolean) {
+    this.form = this._formBuilder.group({
+      control: {value: '', disabled: isDisabled},
+    });
+  }
+}

src/material/select/select.ts

@@ -60,6 +60,7 @@ import {
   ViewEncapsulation,
 } from '@angular/core';
 import {
+  AbstractControl,
   ControlValueAccessor,
   FormGroupDirective,
   NgControl,
@@ -281,6 +282,12 @@ export abstract class _MatSelectBase<C>
   /** Current `ariar-labelledby` value for the select trigger. */
   private _triggerAriaLabelledBy: string | null = null;
 
+  /**
+   * Keeps track of the previous form control assigned to the select.
+   * Used to detect if it has changed.
+   */
+  private _previousControl: AbstractControl | null | undefined;
+
   /** Emits whenever the component is destroyed. */
   protected readonly _destroy = new Subject<void>();
 
@@ -559,6 +566,7 @@ export abstract class _MatSelectBase<C>
 
   ngDoCheck() {
     const newAriaLabelledby = this._getTriggerAriaLabelledby();
+    const ngControl = this.ngControl;
 
     // We have to manage setting the `aria-labelledby` ourselves, because part of its value
     // is computed as a result of a content query which can cause this binding to trigger a
@@ -573,7 +581,20 @@ export abstract class _MatSelectBase<C>
       }
     }
 
-    if (this.ngControl) {
+    if (ngControl) {
+      // The disabled state might go out of sync if the form group is swapped out. See #17860.
+      if (this._previousControl !== ngControl.control) {
+        if (
+          this._previousControl !== undefined &&
+          ngControl.disabled !== null &&
+          ngControl.disabled !== this.disabled
+        ) {
+          this.disabled = ngControl.disabled;
+        }
+
+        this._previousControl = ngControl.control;
+      }
+
       this.updateErrorState();
     }
   }