Skip to content

Commit b62d0d1

Browse files
committed
fix(material/checkbox): tooltip not shown in checkbox while keyboard navigation
Fixes bug in the Angular Material `checkbox` where the tooltip was not shown is not shown on keyboard navigation. This is because the checkbox was not focused when switching using keyboard naviagation Fixes #28107
1 parent 59c8bb9 commit b62d0d1

File tree

1 file changed

+18
-2
lines changed

1 file changed

+18
-2
lines changed

src/material/checkbox/checkbox.ts

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
Input,
2121
NgZone,
2222
numberAttribute,
23+
OnDestroy,
2324
Optional,
2425
Output,
2526
ViewChild,
@@ -28,7 +29,7 @@ import {
2829
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
2930
import {MatRipple} from '@angular/material/core';
3031
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
31-
import {FocusableOption} from '@angular/cdk/a11y';
32+
import {FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
3233
import {
3334
MAT_CHECKBOX_DEFAULT_OPTIONS,
3435
MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY,
@@ -92,7 +93,9 @@ const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
9293
encapsulation: ViewEncapsulation.None,
9394
changeDetection: ChangeDetectionStrategy.OnPush,
9495
})
95-
export class MatCheckbox implements AfterViewInit, ControlValueAccessor, FocusableOption {
96+
export class MatCheckbox
97+
implements AfterViewInit, ControlValueAccessor, FocusableOption, OnDestroy
98+
{
9699
/** Focuses the checkbox. */
97100
focus() {
98101
this._inputElement.nativeElement.focus();
@@ -204,6 +207,7 @@ export class MatCheckbox implements AfterViewInit, ControlValueAccessor, Focusab
204207
public _elementRef: ElementRef<HTMLElement>,
205208
private _changeDetectorRef: ChangeDetectorRef,
206209
private _ngZone: NgZone,
210+
private _focusMonitor: FocusMonitor,
207211
@Attribute('tabindex') tabIndex: string,
208212
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
209213
@Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) private _options?: MatCheckboxDefaultOptions,
@@ -215,9 +219,21 @@ export class MatCheckbox implements AfterViewInit, ControlValueAccessor, Focusab
215219
}
216220

217221
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+
});
218230
this._syncIndeterminate(this._indeterminate);
219231
}
220232

233+
ngOnDestroy() {
234+
this._focusMonitor.stopMonitoring(this._elementRef);
235+
}
236+
221237
/** Whether the checkbox is checked. */
222238
@Input({transform: booleanAttribute})
223239
get checked(): boolean {

0 commit comments

Comments
 (0)