Skip to content

Commit

Permalink
feat(autocomplete): allow option ripples to be disabled (#8851)
Browse files Browse the repository at this point in the history
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`.
  • Loading branch information
crisbeto authored and jelbourn committed Jan 4, 2018
1 parent 41f5fe2 commit ff31ac8
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 7 deletions.
5 changes: 3 additions & 2 deletions src/lib/autocomplete/autocomplete.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(),
Expand Down Expand Up @@ -1673,7 +1672,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>
Expand All @@ -1686,6 +1686,7 @@ class SimpleAutocomplete implements OnDestroy {
valueSub: Subscription;
floatLabel = 'auto';
width: number;
disableRipple = false;

@ViewChild(MatAutocompleteTrigger) trigger: MatAutocompleteTrigger;
@ViewChild(MatAutocomplete) panel: MatAutocomplete;
Expand Down
27 changes: 22 additions & 5 deletions src/lib/autocomplete/autocomplete.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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';


Expand All @@ -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,
Expand All @@ -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>;
Expand Down Expand Up @@ -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();
Expand Down

0 comments on commit ff31ac8

Please sign in to comment.