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;