From f76e544864a52faadeefde0ebf4c04ced72d317f Mon Sep 17 00:00:00 2001
From: Maxim Marchenko <maxim.marchenko.bp@gmail.com>
Date: Sat, 24 Aug 2024 00:40:43 +0300
Subject: [PATCH] fix(components/checkbox): focus classes are not being applied
 to mat-checkbox

Fixes the issue in Angular Material 'checkbox' component where classes related to focusing mechanism weren't applied.
Related to missing FocusMonitor usage which is being used in other components.
---
 src/material/checkbox/checkbox.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts
index 19a09c881c29..72aea17f449d 100644
--- a/src/material/checkbox/checkbox.ts
+++ b/src/material/checkbox/checkbox.ts
@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {FocusableOption} from '@angular/cdk/a11y';
+import {FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
 import {
   ANIMATION_MODULE_TYPE,
   AfterViewInit,
@@ -28,6 +28,7 @@ import {
   booleanAttribute,
   forwardRef,
   numberAttribute,
+  OnDestroy,
 } from '@angular/core';
 import {
   AbstractControl,
@@ -116,7 +117,7 @@ const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
   imports: [MatRipple, _MatInternalFormField],
 })
 export class MatCheckbox
-  implements AfterViewInit, OnChanges, ControlValueAccessor, Validator, FocusableOption
+  implements AfterViewInit, OnChanges, ControlValueAccessor, Validator, FocusableOption, OnDestroy
 {
   /** Focuses the checkbox. */
   focus() {
@@ -231,6 +232,7 @@ export class MatCheckbox
     public _elementRef: ElementRef<HTMLElement>,
     private _changeDetectorRef: ChangeDetectorRef,
     private _ngZone: NgZone,
+    private _focusMonitor: FocusMonitor,
     @Attribute('tabindex') tabIndex: string,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
     @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) private _options?: MatCheckboxDefaultOptions,
@@ -250,6 +252,11 @@ export class MatCheckbox
 
   ngAfterViewInit() {
     this._syncIndeterminate(this._indeterminate);
+    this._focusMonitor.monitor(this._elementRef, true);
+  }
+
+  ngOnDestroy() {
+    this._focusMonitor.stopMonitoring(this._elementRef);
   }
 
   /** Whether the checkbox is checked. */