feat(autocomplete): allow option ripples to be disabled

For consistency with other components like `MatSelect`, these changes add the ability for all of the option ripples to be disabled by using the `disableRipple` attribute on `MatAutocomplete`.

Author: crisbeto

src/lib/autocomplete/autocomplete.spec.ts

@@ -1486,6 +1486,39 @@ describe('MatAutocomplete', () => {
     }));
 
 
+    it('should be able to disable option ripples', () => {
+      const fixture: ComponentFixture<SimpleAutocomplete> = createComponent(SimpleAutocomplete);
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.options.toArray().every(option => option.disableRipple!))
+          .toBe(false, 'Expected option ripples to be enabled');
+
+      fixture.componentInstance.disableRipple = true;
+      fixture.detectChanges();
+
+      expect(fixture.componentInstance.options.toArray().every(option => option.disableRipple!))
+          .toBe(true, 'Expected option ripples to be disabled');
+    });
+
+    it('should not show option ripples if they were disabled', fakeAsync(() => {
+      const fixture: ComponentFixture<SimpleAutocomplete> = createComponent(SimpleAutocomplete);
+
+      fixture.componentInstance.disableRipple = true;
+      fixture.detectChanges();
+
+      fixture.componentInstance.trigger.openPanel();
+      zone.simulateZoneExit();
+      fixture.detectChanges();
+
+      const option = overlayContainerElement.querySelector('mat-option')!;
+
+      dispatchFakeEvent(option, 'mousedown');
+      dispatchFakeEvent(option, 'mouseup');
+
+      expect(option.querySelectorAll('.mat-ripple-element').length).toBe(0);
+    }));
+
+
   });
 
   it('should have correct width when opened', () => {
@@ -1615,7 +1648,8 @@ describe('MatAutocomplete', () => {
       <input matInput placeholder="State" [matAutocomplete]="auto" [formControl]="stateCtrl">
     </mat-form-field>
 
-    <mat-autocomplete class="class-one class-two" #auto="matAutocomplete" [displayWith]="displayFn">
+    <mat-autocomplete class="class-one class-two" #auto="matAutocomplete"
+      [displayWith]="displayFn" [disableRipple]="disableRipple">
       <mat-option *ngFor="let state of filteredStates" [value]="state">
         <span> {{ state.code }}: {{ state.name }}  </span>
       </mat-option>
@@ -1628,6 +1662,7 @@ class SimpleAutocomplete implements OnDestroy {
   valueSub: Subscription;
   floatLabel = 'auto';
   width: number;
+  disableRipple = false;
 
   @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
   @ViewChild(MatAutocomplete) panel: MatAutocomplete;

src/lib/autocomplete/autocomplete.ts

@@ -5,7 +5,6 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-
 import {
   AfterContentInit,
   Component,
@@ -21,7 +20,13 @@ import {
   EventEmitter,
   Output,
 } from '@angular/core';
-import {MatOption, MatOptgroup} from '@angular/material/core';
+import {
+  MatOption,
+  MatOptgroup,
+  MAT_OPTION_PARENT_COMPONENT,
+  mixinDisableRipple,
+  CanDisableRipple,
+} from '@angular/material/core';
 import {ActiveDescendantKeyManager} from '@angular/cdk/a11y';
 
 
@@ -40,6 +45,11 @@ export class MatAutocompleteSelectedEvent {
     public option: MatOption) { }
 }
 
+// Boilerplate for applying mixins to MatAutocomplete.
+/** @docs-private */
+export class MatAutocompleteBase {}
+export const _MatAutocompleteMixinBase = mixinDisableRipple(MatAutocompleteBase);
+
 
 @Component({
   moduleId: module.id,
@@ -50,11 +60,16 @@ export class MatAutocompleteSelectedEvent {
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
   exportAs: 'matAutocomplete',
+  inputs: ['disableRipple'],
   host: {
     'class': 'mat-autocomplete'
-  }
+  },
+  providers: [
+    {provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}
+  ]
 })
-export class MatAutocomplete implements AfterContentInit {
+export class MatAutocomplete extends _MatAutocompleteMixinBase implements AfterContentInit,
+  CanDisableRipple {
 
   /** Manages active item in option list based on key events. */
   _keyManager: ActiveDescendantKeyManager<MatOption>;
@@ -103,7 +118,9 @@ export class MatAutocomplete implements AfterContentInit {
   /** Unique ID to be used by autocomplete trigger's "aria-owns" property. */
   id: string = `mat-autocomplete-${_uniqueAutocompleteIdCounter++}`;
 
-  constructor(private _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) { }
+  constructor(private _changeDetectorRef: ChangeDetectorRef, private _elementRef: ElementRef) {
+    super();
+  }
 
   ngAfterContentInit() {
     this._keyManager = new ActiveDescendantKeyManager<MatOption>(this.options).withWrap();