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

@@ -1519,28 +1519,58 @@ describe('MatAutocomplete', () => {
       expect(panel.classList).toContain('class-two');
     }));
 
-
-    it('should reset correctly when closed programmatically', async(() => {
+    it('should reset correctly when closed programmatically', fakeAsync(() => {
       TestBed.overrideProvider(MAT_AUTOCOMPLETE_SCROLL_STRATEGY, {
         useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(),
         deps: [Overlay]
       });
 
-      const fixture = TestBed.createComponent(SimpleAutocomplete);
+      const fixture = createComponent(SimpleAutocomplete);
       fixture.detectChanges();
       const trigger = fixture.componentInstance.trigger;
 
       trigger.openPanel();
       fixture.detectChanges();
+      zone.simulateZoneExit();
 
-      fixture.whenStable().then(() => {
-        expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
+      expect(trigger.panelOpen).toBe(true, 'Expected panel to be open.');
 
-        scrolledSubject.next();
-        fixture.detectChanges();
+      scrolledSubject.next();
+      fixture.detectChanges();
 
-        expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
-      });
+      expect(trigger.panelOpen).toBe(false, 'Expected panel to be closed.');
+    }));
+
+    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);
     }));
 
   });
@@ -1672,7 +1702,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>
@@ -1685,6 +1716,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();