fix(material/autocomplete): apply theme of parent form field to panel (#25983)

Apply the theme of the autocomplete's parent form field to its panel.
Fix issue where theme color only applies to the input, and does not
affect the panel.

Author: zarend

src/dev-app/autocomplete/autocomplete-demo.html

@@ -6,23 +6,28 @@
     <div>Reactive value: {{ stateCtrl.value | json }}</div>
     <div>Reactive dirty: {{ stateCtrl.dirty }}</div>
 
-    <mat-form-field>
+    <mat-form-field [color]="reactiveStatesTheme">
       <mat-label>State</mat-label>
       <input matInput [matAutocomplete]="reactiveAuto" [formControl]="stateCtrl">
-      <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
-        <mat-option *ngFor="let state of tempStates" [value]="state">
-          <span>{{ state.name }}</span>
-          <span class="demo-secondary-text"> ({{ state.code }}) </span>
-        </mat-option>
-      </mat-autocomplete>
     </mat-form-field>
+    <mat-autocomplete #reactiveAuto="matAutocomplete" [displayWith]="displayFn">
+      <mat-option *ngFor="let state of tempStates" [value]="state">
+        <span>{{ state.name }}</span>
+        <span class="demo-secondary-text"> ({{ state.code }}) </span>
+      </mat-option>
+    </mat-autocomplete>
 
     <mat-card-actions>
       <button mat-button (click)="stateCtrl.reset()">RESET</button>
       <button mat-button (click)="stateCtrl.setValue(states[10])">SET VALUE</button>
       <button mat-button (click)="stateCtrl.enabled ? stateCtrl.disable() : stateCtrl.enable()">
         TOGGLE DISABLED
       </button>
+      <select [(ngModel)]="reactiveStatesTheme">
+        <option *ngFor="let theme of availableThemes" [value]="theme.value">
+          {{theme.name}}
+        </option>
+      </select>
     </mat-card-actions>
 
   </mat-card>
@@ -33,7 +38,7 @@
     <div>Template-driven dirty: {{ modelDir ? modelDir.dirty : false }}</div>
 
     <!-- Added an ngIf below to test that autocomplete works with ngIf -->
-    <mat-form-field *ngIf="true">
+    <mat-form-field *ngIf="true" [color]="templateStatesTheme">
       <mat-label>State</mat-label>
       <input matInput [matAutocomplete]="tdAuto" [(ngModel)]="currentState"
         (ngModelChange)="tdStates = filterStates(currentState)" [disabled]="tdDisabled">
@@ -50,6 +55,11 @@
       <button mat-button (click)="tdDisabled=!tdDisabled">
         TOGGLE DISABLED
       </button>
+      <select [(ngModel)]="templateStatesTheme">
+        <option *ngFor="let theme of availableThemes" [value]="theme.value">
+          {{theme.name}}
+        </option>
+      </select>
     </mat-card-actions>
 
   </mat-card>

src/dev-app/autocomplete/autocomplete-demo.ts

@@ -15,6 +15,7 @@ import {MatCardModule} from '@angular/material/card';
 import {MatInputModule} from '@angular/material/input';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
+import {ThemePalette} from '@angular/material/core';
 
 export interface State {
   code: string;
@@ -52,6 +53,15 @@ export class AutocompleteDemo {
 
   tdDisabled = false;
 
+  reactiveStatesTheme: ThemePalette = 'primary';
+  templateStatesTheme: ThemePalette = 'primary';
+
+  availableThemes = [
+    {value: 'primary', name: 'Primary'},
+    {value: 'accent', name: 'Accent'},
+    {value: 'warn', name: 'Warn'},
+  ];
+
   @ViewChild(NgModel) modelDir: NgModel;
 
   groupedStates: StateGroup[];

src/material/autocomplete/autocomplete-trigger.ts

@@ -666,6 +666,7 @@ export abstract class _MatAutocompleteTriggerBase
 
     this.autocomplete._setVisibility();
     this.autocomplete._isOpen = this._overlayAttached = true;
+    this.autocomplete._setColor(this._formField?.color);
 
     // We need to do an extra `panelOpen` check in here, because the
     // autocomplete won't be shown if there are no options.

src/material/autocomplete/autocomplete.spec.ts

@@ -945,6 +945,28 @@ describe('MDC-based MatAutocomplete', () => {
     });
   });
 
+  describe('with theming', () => {
+    let fixture: ComponentFixture<SimpleAutocomplete>;
+
+    beforeEach(() => {
+      fixture = createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+    });
+
+    it('should transfer the theme to the autocomplete panel', () => {
+      fixture.componentInstance.theme = 'warn';
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      fixture.detectChanges();
+
+      const panel = overlayContainerElement.querySelector(
+        '.mat-mdc-autocomplete-panel',
+      )! as HTMLElement;
+      expect(panel.classList).toContain('mat-warn');
+    });
+  });
+
   describe('keyboard events', () => {
     let fixture: ComponentFixture<SimpleAutocomplete>;
     let input: HTMLInputElement;
@@ -3393,7 +3415,7 @@ describe('MDC-based MatAutocomplete', () => {
 });
 
 const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
-  <mat-form-field [floatLabel]="floatLabel" [style.width.px]="width">
+  <mat-form-field [floatLabel]="floatLabel" [style.width.px]="width" [color]="theme">
     <mat-label *ngIf="hasLabel">State</mat-label>
     <input
       matInput
@@ -3403,7 +3425,6 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
       [matAutocompleteDisabled]="autocompleteDisabled"
       [formControl]="stateCtrl">
   </mat-form-field>
-
   <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
     [disableRipple]="disableRipple" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
     (opened)="openedSpy()" (closed)="closedSpy()">
@@ -3431,6 +3452,7 @@ class SimpleAutocomplete implements OnDestroy {
   ariaLabel: string;
   ariaLabelledby: string;
   panelClass = 'class-one class-two';
+  theme: string;
   openedSpy = jasmine.createSpy('autocomplete opened spy');
   closedSpy = jasmine.createSpy('autocomplete closed spy');
 

src/material/autocomplete/autocomplete.ts

@@ -34,6 +34,7 @@ import {
   CanDisableRipple,
   _MatOptionBase,
   _MatOptgroupBase,
+  ThemePalette,
 } from '@angular/material/core';
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty, coerceStringArray} from '@angular/cdk/coercion';
@@ -122,6 +123,14 @@ export abstract class _MatAutocompleteBase
   }
   _isOpen: boolean = false;
 
+  /** @docs-private Sets the theme color of the panel. */
+  _setColor(value: ThemePalette) {
+    this._color = value;
+    this._setThemeClasses(this._classList);
+  }
+  /** @docs-private theme color of the panel */
+  private _color: ThemePalette;
+
   // The @ViewChild query for TemplateRef here needs to be static because some code paths
   // lead to the overlay being created before change detection has finished for this component.
   // Notably, another component may trigger `focus` on the autocomplete-trigger.
@@ -206,6 +215,7 @@ export abstract class _MatAutocompleteBase
     }
 
     this._setVisibilityClasses(this._classList);
+    this._setThemeClasses(this._classList);
     this._elementRef.nativeElement.className = '';
   }
   _classList: {[key: string]: boolean} = {};
@@ -296,6 +306,13 @@ export abstract class _MatAutocompleteBase
     classList[this._visibleClass] = this.showPanel;
     classList[this._hiddenClass] = !this.showPanel;
   }
+
+  /** Sets the theming classes on a classlist based on the theme of the panel. */
+  private _setThemeClasses(classList: {[key: string]: boolean}) {
+    classList['mat-primary'] = this._color === 'primary';
+    classList['mat-warn'] = this._color === 'warn';
+    classList['mat-accent'] = this._color === 'accent';
+  }
 }
 
 @Component({

tools/public_api_guard/material/autocomplete.md

@@ -38,6 +38,7 @@ import { QueryList } from '@angular/core';
 import { ScrollStrategy } from '@angular/cdk/overlay';
 import { SimpleChanges } from '@angular/core';
 import { TemplateRef } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
 import { ViewContainerRef } from '@angular/core';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 
@@ -123,6 +124,7 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
     readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent>;
     panel: ElementRef;
     panelWidth: string | number;
+    _setColor(value: ThemePalette): void;
     _setScrollTop(scrollTop: number): void;
     _setVisibility(): void;
     showPanel: boolean;