diff --git a/src/app/components/checkbox/checkbox.ts b/src/app/components/checkbox/checkbox.ts index 3304ad1b732..d5d9196d8e3 100755 --- a/src/app/components/checkbox/checkbox.ts +++ b/src/app/components/checkbox/checkbox.ts @@ -35,6 +35,10 @@ export const CHECKBOX_VALUE_ACCESSOR: any = { [value]="value" [attr.name]="name" [checked]="checked()" + (focus)="onInputFocus($event)" + (blur)="onInputBlur($event)" + (change)="handleChange($event)" + [disabled]="disabled" [attr.tabindex]="tabindex" [disabled]="disabled" [readonly]="readonly" @@ -42,8 +46,6 @@ export const CHECKBOX_VALUE_ACCESSOR: any = { [attr.aria-labelledby]="ariaLabelledBy" [attr.aria-label]="ariaLabel" [attr.aria-checked]="checked()" - (focus)="onFocus()" - (blur)="onBlur()" [attr.data-pc-section]="'hiddenInput'" /> @@ -182,6 +184,18 @@ export class Checkbox implements ControlValueAccessor { * @group Emits */ @Output() onChange: EventEmitter = new EventEmitter(); + /** + * Callback to invoke when the receives focus. + * @param {Event} event - Browser event. + * @group Emits + */ + @Output() onFocus: EventEmitter = new EventEmitter(); + /** + * Callback to invoke when the loses focus. + * @param {Event} event - Browser event. + * @group Emits + */ + @Output() onBlur: EventEmitter = new EventEmitter(); @ViewChild('input') inputViewChild: Nullable; @@ -234,13 +248,15 @@ export class Checkbox implements ControlValueAccessor { } } - onFocus() { + onInputFocus(event: Event) { this.focused = true; + this.onFocus.emit(); } - onBlur() { + onInputBlur(event: Event) { this.focused = false; this.onModelTouched(); + this.onBlur.emit(); } writeValue(model: any): void {