fix(material/radio): disable ripples under noop animations module (#2…

…2855) Fixes that we weren't disabling the radio button ripples when the `NoopAnimationsModule` is used. (cherry picked from commit babf80f)
angular · Jun 2, 2021 · a3bb573 · a3bb573
1 parent cfc4ad9
commit a3bb573
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/src/material-experimental/mdc-radio/radio.ts b/src/material-experimental/mdc-radio/radio.ts
@@ -131,20 +131,18 @@ export class MatRadioButton extends _MatRadioButtonBase implements AfterViewInit
 
   _radioFoundation = new MDCRadioFoundation(this._radioAdapter);
   _classes: {[key: string]: boolean} = {};
-  _noopAnimations: boolean;
 
   constructor(@Optional() @Inject(MAT_RADIO_GROUP) radioGroup: MatRadioGroup,
               elementRef: ElementRef,
               _changeDetector: ChangeDetectorRef,
               _focusMonitor: FocusMonitor,
               _radioDispatcher: UniqueSelectionDispatcher,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) _animationMode?: string,
+              @Optional() @Inject(ANIMATION_MODULE_TYPE) animationMode?: string,
               @Optional() @Inject(MAT_RADIO_DEFAULT_OPTIONS)
               _providerOverride?: MatRadioDefaultOptions,
               @Attribute('tabindex') tabIndex?: string) {
     super(radioGroup, elementRef, _changeDetector, _focusMonitor,
-        _radioDispatcher, _animationMode, _providerOverride, tabIndex);
-    this._noopAnimations = _animationMode === 'NoopAnimations';
+        _radioDispatcher, animationMode, _providerOverride, tabIndex);
     this._rippleAnimation =
         this._noopAnimations ? {enterDuration: 0, exitDuration: 0} : RIPPLE_ANIMATION_CONFIG;
   }

diff --git a/src/material/radio/radio.html b/src/material/radio/radio.html
@@ -26,7 +26,7 @@
          [matRippleDisabled]="_isRippleDisabled()"
          [matRippleCentered]="true"
          [matRippleRadius]="20"
-         [matRippleAnimation]="{enterDuration: 150}">
+         [matRippleAnimation]="{enterDuration: _noopAnimations ? 0 : 150}">
 
       <span class="mat-ripple-element mat-radio-persistent-ripple"></span>
     </span>

diff --git a/src/material/radio/radio.ts b/src/material/radio/radio.ts
@@ -489,19 +489,23 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
   /** The native `<input type=radio>` element */
   @ViewChild('input') _inputElement: ElementRef<HTMLInputElement>;
 
+  /** Whether animations are disabled. */
+  _noopAnimations: boolean;
+
   constructor(radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>,
               elementRef: ElementRef,
               protected _changeDetector: ChangeDetectorRef,
               private _focusMonitor: FocusMonitor,
               private _radioDispatcher: UniqueSelectionDispatcher,
-              public _animationMode?: string,
+              animationMode?: string,
               private _providerOverride?: MatRadioDefaultOptions,
               tabIndex?: string) {
     super(elementRef);
 
     // Assertions. Ideally these should be stripped out by the compiler.
     // TODO(jelbourn): Assert that there's no name binding AND a parent radio group.
     this.radioGroup = radioGroup;
+    this._noopAnimations = animationMode === 'NoopAnimations';
 
     if (tabIndex) {
       this.tabIndex = coerceNumberProperty(tabIndex, 0);
@@ -636,7 +640,7 @@ export abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase imple
     'class': 'mat-radio-button',
     '[class.mat-radio-checked]': 'checked',
     '[class.mat-radio-disabled]': 'disabled',
-    '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"',
+    '[class._mat-animation-noopable]': '_noopAnimations',
     '[class.mat-primary]': 'color === "primary"',
     '[class.mat-accent]': 'color === "accent"',
     '[class.mat-warn]': 'color === "warn"',

diff --git a/tools/public_api_guard/material/radio.d.ts b/tools/public_api_guard/material/radio.d.ts
@@ -1,7 +1,7 @@
 export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBase implements OnInit, AfterViewInit, OnDestroy, CanDisableRipple, HasTabIndex {
-    _animationMode?: string | undefined;
     protected _changeDetector: ChangeDetectorRef;
     _inputElement: ElementRef<HTMLInputElement>;
+    _noopAnimations: boolean;
     ariaDescribedby: string;
     ariaLabel: string;
     ariaLabelledby: string;
@@ -22,7 +22,7 @@ export declare abstract class _MatRadioButtonBase extends _MatRadioButtonMixinBa
     set required(value: boolean);
     get value(): any;
     set value(value: any);
-    constructor(radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, _animationMode?: string | undefined, _providerOverride?: MatRadioDefaultOptions | undefined, tabIndex?: string);
+    constructor(radioGroup: _MatRadioGroupBase<_MatRadioButtonBase>, elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _focusMonitor: FocusMonitor, _radioDispatcher: UniqueSelectionDispatcher, animationMode?: string, _providerOverride?: MatRadioDefaultOptions | undefined, tabIndex?: string);
     _isRippleDisabled(): boolean;
     _markForCheck(): void;
     _onInputChange(event: Event): void;