@@ -20,6 +20,7 @@ import {
20
20
Input ,
21
21
NgZone ,
22
22
numberAttribute ,
23
+ OnDestroy ,
23
24
Optional ,
24
25
Output ,
25
26
ViewChild ,
@@ -28,7 +29,7 @@ import {
28
29
import { ControlValueAccessor , NG_VALUE_ACCESSOR } from '@angular/forms' ;
29
30
import { MatRipple } from '@angular/material/core' ;
30
31
import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations' ;
31
- import { FocusableOption } from '@angular/cdk/a11y' ;
32
+ import { FocusableOption , FocusMonitor } from '@angular/cdk/a11y' ;
32
33
import {
33
34
MAT_CHECKBOX_DEFAULT_OPTIONS ,
34
35
MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY ,
@@ -92,7 +93,9 @@ const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
92
93
encapsulation : ViewEncapsulation . None ,
93
94
changeDetection : ChangeDetectionStrategy . OnPush ,
94
95
} )
95
- export class MatCheckbox implements AfterViewInit , ControlValueAccessor , FocusableOption {
96
+ export class MatCheckbox
97
+ implements AfterViewInit , ControlValueAccessor , FocusableOption , OnDestroy
98
+ {
96
99
/** Focuses the checkbox. */
97
100
focus ( ) {
98
101
this . _inputElement . nativeElement . focus ( ) ;
@@ -204,6 +207,7 @@ export class MatCheckbox implements AfterViewInit, ControlValueAccessor, Focusab
204
207
public _elementRef : ElementRef < HTMLElement > ,
205
208
private _changeDetectorRef : ChangeDetectorRef ,
206
209
private _ngZone : NgZone ,
210
+ private _focusMonitor : FocusMonitor ,
207
211
@Attribute ( 'tabindex' ) tabIndex : string ,
208
212
@Optional ( ) @Inject ( ANIMATION_MODULE_TYPE ) public _animationMode ?: string ,
209
213
@Optional ( ) @Inject ( MAT_CHECKBOX_DEFAULT_OPTIONS ) private _options ?: MatCheckboxDefaultOptions ,
@@ -215,9 +219,21 @@ export class MatCheckbox implements AfterViewInit, ControlValueAccessor, Focusab
215
219
}
216
220
217
221
ngAfterViewInit ( ) {
222
+ this . _focusMonitor . monitor ( this . _elementRef , true ) . subscribe ( focusOrigin => {
223
+ if ( ! focusOrigin ) {
224
+ Promise . resolve ( ) . then ( ( ) => {
225
+ this . _onTouched ( ) ;
226
+ this . _changeDetectorRef . markForCheck ( ) ;
227
+ } ) ;
228
+ }
229
+ } ) ;
218
230
this . _syncIndeterminate ( this . _indeterminate ) ;
219
231
}
220
232
233
+ ngOnDestroy ( ) {
234
+ this . _focusMonitor . stopMonitoring ( this . _elementRef ) ;
235
+ }
236
+
221
237
/** Whether the checkbox is checked. */
222
238
@Input ( { transform : booleanAttribute } )
223
239
get checked ( ) : boolean {
0 commit comments