fix(material): trigger focus/blur event for mat-checkbox (#2611)

fix #2602

src/material/checkbox/src/checkbox.type.ts

@@ -1,6 +1,7 @@
-import { Component, ViewChild, Renderer2, AfterViewChecked } from '@angular/core';
+import { Component, ViewChild, Renderer2, AfterViewChecked, OnDestroy, AfterViewInit } from '@angular/core';
 import { FieldType } from '@ngx-formly/material/form-field';
 import { MatCheckbox } from '@angular/material/checkbox';
+import { FocusMonitor } from '@angular/cdk/a11y';
 
 @Component({
   selector: 'formly-field-mat-checkbox',
@@ -18,7 +19,7 @@ import { MatCheckbox } from '@angular/material/checkbox';
     </mat-checkbox>
   `,
 })
-export class FormlyFieldCheckbox extends FieldType implements AfterViewChecked {
+export class FormlyFieldCheckbox extends FieldType implements AfterViewInit, AfterViewChecked, OnDestroy {
   @ViewChild(MatCheckbox) checkbox!: MatCheckbox;
   defaultOptions = {
     templateOptions: {
@@ -32,7 +33,7 @@ export class FormlyFieldCheckbox extends FieldType implements AfterViewChecked {
   };
 
   private _required!: boolean;
-  constructor(private renderer: Renderer2) {
+  constructor(private renderer: Renderer2, private focusMonitor: FocusMonitor) {
     super();
   }
 
@@ -41,6 +42,16 @@ export class FormlyFieldCheckbox extends FieldType implements AfterViewChecked {
     super.onContainerClick(event);
   }
 
+  ngAfterViewInit() {
+    this.focusMonitor.monitor(this.checkbox._inputElement, true).subscribe(focusOrigin => {
+      if (focusOrigin) {
+        this.to.focus && this.to.focus(this.field);
+      } else {
+        this.to.blur && this.to.blur(this.field);
+      }
+    });
+  }
+
   ngAfterViewChecked() {
     if (this.required !== this._required && this.checkbox && this.checkbox._inputElement) {
       this._required = this.required;
@@ -52,4 +63,8 @@ export class FormlyFieldCheckbox extends FieldType implements AfterViewChecked {
       }
     }
   }
+
+  ngOnDestroy() {
+    this.focusMonitor.stopMonitoring(this.checkbox._inputElement);
+  }
 }