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,7 +6,7 @@
     <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">
@@ -23,6 +23,11 @@
       <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.html

@@ -3,6 +3,7 @@
     class="mat-mdc-autocomplete-panel mdc-menu-surface mdc-menu-surface--open"
     role="listbox"
     [id]="id"
+    [class]="_getPanelTheme()"
     [ngClass]="_classList"
     [attr.aria-label]="ariaLabel || null"
     [attr.aria-labelledby]="_getPanelAriaLabelledby(formFieldId)"

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
@@ -3402,19 +3424,18 @@ const SIMPLE_AUTOCOMPLETE_TEMPLATE = `
       [matAutocompletePosition]="position"
       [matAutocompleteDisabled]="autocompleteDisabled"
       [formControl]="stateCtrl">
+    <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
+      [disableRipple]="disableRipple" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
+      (opened)="openedSpy()" (closed)="closedSpy()">
+      <mat-option
+        *ngFor="let state of filteredStates"
+        [value]="state"
+        [style.height.px]="state.height"
+        [disabled]="state.disabled">
+        <span>{{ state.code }}: {{ state.name }}</span>
+      </mat-option>
+    </mat-autocomplete>
   </mat-form-field>
-
-  <mat-autocomplete [class]="panelClass" #auto="matAutocomplete" [displayWith]="displayFn"
-    [disableRipple]="disableRipple" [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"
-    (opened)="openedSpy()" (closed)="closedSpy()">
-    <mat-option
-      *ngFor="let state of filteredStates"
-      [value]="state"
-      [style.height.px]="state.height"
-      [disabled]="state.disabled">
-      <span>{{ state.code }}: {{ state.name }}</span>
-    </mat-option>
-  </mat-autocomplete>
 `;
 
 @Component({template: SIMPLE_AUTOCOMPLETE_TEMPLATE})
@@ -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

@@ -15,6 +15,7 @@ import {
   Directive,
   ElementRef,
   EventEmitter,
+  inject,
   Inject,
   InjectionToken,
   Input,
@@ -35,6 +36,7 @@ import {
   _MatOptionBase,
   _MatOptgroupBase,
 } from '@angular/material/core';
+import {MatFormField, MAT_FORM_FIELD} from '@angular/material/form-field';
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
 import {BooleanInput, coerceBooleanProperty, coerceStringArray} from '@angular/cdk/coercion';
 import {Platform} from '@angular/cdk/platform';
@@ -291,6 +293,13 @@ export abstract class _MatAutocompleteBase
     return this.ariaLabelledby ? labelExpression + this.ariaLabelledby : labelId;
   }
 
+  /** Returns the theme to be used on the panel. */
+  _getPanelTheme() {
+    return this._parentFormField ? `mat-${this._parentFormField.color}` : '';
+  }
+
+  protected _parentFormField: MatFormField | null = inject(MAT_FORM_FIELD, {optional: true});
+
   /** Sets the autocomplete visibility classes on a classlist based on the panel is visible. */
   private _setVisibilityClasses(classList: {[key: string]: boolean}) {
     classList[this._visibleClass] = this.showPanel;

tools/public_api_guard/material/autocomplete.md

@@ -104,6 +104,7 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
     displayWith: ((value: any) => string) | null;
     _emitSelectEvent(option: _MatOptionBase): void;
     _getPanelAriaLabelledby(labelId: string | null): string | null;
+    _getPanelTheme(): string;
     _getScrollTop(): number;
     protected abstract _hiddenClass: string;
     id: string;
@@ -123,6 +124,8 @@ export abstract class _MatAutocompleteBase extends _MatAutocompleteMixinBase imp
     readonly optionSelected: EventEmitter<MatAutocompleteSelectedEvent>;
     panel: ElementRef;
     panelWidth: string | number;
+    // (undocumented)
+    protected _parentFormField: MatFormField | null;
     _setScrollTop(scrollTop: number): void;
     _setVisibility(): void;
     showPanel: boolean;