File tree Expand file tree Collapse file tree 2 files changed +26
-0
lines changed Expand file tree Collapse file tree 2 files changed +26
-0
lines changed Original file line number Diff line number Diff line change @@ -220,6 +220,8 @@ describe('MatCheckbox', () => {
220
220
221
221
expect ( checkboxInstance . checked ) . toBe ( false ) ;
222
222
expect ( checkboxInstance . indeterminate ) . toBe ( false ) ;
223
+
224
+ flush ( ) ;
223
225
} ) ) ;
224
226
225
227
it ( 'should add and remove disabled state' , ( ) => {
@@ -539,6 +541,19 @@ describe('MatCheckbox', () => {
539
541
it ( 'should not initially have any transition classes' , ( ) => {
540
542
expect ( checkboxNativeElement ) . not . toMatch ( / ^ m a t \- c h e c k b o x \- a n i m / g) ;
541
543
} ) ;
544
+
545
+ it ( 'should not have transition classes when animation ends' , fakeAsync ( ( ) => {
546
+ testComponent . isIndeterminate = true ;
547
+ fixture . detectChanges ( ) ;
548
+
549
+ expect ( checkboxNativeElement . classList )
550
+ . toContain ( 'mat-checkbox-anim-unchecked-indeterminate' ) ;
551
+
552
+ flush ( ) ;
553
+
554
+ expect ( checkboxNativeElement . classList )
555
+ . not . toContain ( 'mat-checkbox-anim-unchecked-indeterminate' ) ;
556
+ } ) ) ;
542
557
} ) ;
543
558
544
559
describe ( `when MAT_CHECKBOX_CLICK_ACTION is 'check'` , ( ) => {
Original file line number Diff line number Diff line change @@ -19,6 +19,7 @@ import {
19
19
forwardRef ,
20
20
Inject ,
21
21
Input ,
22
+ NgZone ,
22
23
OnDestroy ,
23
24
Optional ,
24
25
Output ,
@@ -182,6 +183,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
182
183
constructor ( elementRef : ElementRef ,
183
184
private _changeDetectorRef : ChangeDetectorRef ,
184
185
private _focusMonitor : FocusMonitor ,
186
+ private _ngZone : NgZone ,
185
187
@Attribute ( 'tabindex' ) tabIndex : string ,
186
188
@Optional ( ) @Inject ( MAT_CHECKBOX_CLICK_ACTION )
187
189
private _clickAction : MatCheckboxClickAction ) {
@@ -291,6 +293,15 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
291
293
292
294
if ( this . _currentAnimationClass . length > 0 ) {
293
295
element . classList . add ( this . _currentAnimationClass ) ;
296
+
297
+ // Remove the animation class to avoid animation when the checkbox is moved between containers
298
+ const animationClass = this . _currentAnimationClass ;
299
+
300
+ this . _ngZone . runOutsideAngular ( ( ) => {
301
+ setTimeout ( ( ) => {
302
+ element . classList . remove ( animationClass ) ;
303
+ } , 1000 ) ;
304
+ } ) ;
294
305
}
295
306
}
296
307
You can’t perform that action at this time.
0 commit comments