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

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;