From ff31ac88ab1252d5cdd91f0a3e03a95d081d9c5a Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 4 Jan 2018 23:24:00 +0200 Subject: [PATCH] feat(autocomplete): allow option ripples to be disabled (#8851) 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`. --- src/lib/autocomplete/autocomplete.spec.ts | 5 +++-- src/lib/autocomplete/autocomplete.ts | 27 ++++++++++++++++++----- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/src/lib/autocomplete/autocomplete.spec.ts b/src/lib/autocomplete/autocomplete.spec.ts index 3425f263732a..a98d236344f7 100644 --- a/src/lib/autocomplete/autocomplete.spec.ts +++ b/src/lib/autocomplete/autocomplete.spec.ts @@ -1521,7 +1521,6 @@ describe('MatAutocomplete', () => { expect(panel.classList).toContain('class-two'); })); - it('should reset correctly when closed programmatically', fakeAsync(() => { TestBed.overrideProvider(MAT_AUTOCOMPLETE_SCROLL_STRATEGY, { useFactory: (overlay: Overlay) => () => overlay.scrollStrategies.close(), @@ -1673,7 +1672,8 @@ describe('MatAutocomplete', () => { - + {{ state.code }}: {{ state.name }} @@ -1686,6 +1686,7 @@ class SimpleAutocomplete implements OnDestroy { valueSub: Subscription; floatLabel = 'auto'; width: number; + disableRipple = false; @ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger; @ViewChild(MatAutocomplete) panel: MatAutocomplete; diff --git a/src/lib/autocomplete/autocomplete.ts b/src/lib/autocomplete/autocomplete.ts index cd54eda97632..201e30826419 100644 --- a/src/lib/autocomplete/autocomplete.ts +++ b/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; @@ -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(this.options).withWrap();