How to Trigger Focus Event in PrimeNG p-autoComplete Component using a directive?

I’m working on an Angular application using the PrimeNG p-autoComplete component. I want to trigger an alert when the element gains focus to indicate that focus is on the element, but it’s not working. I'm using a directive to achieve this, and I’d like to know if anyone has a solution. Here's part of my code:

<p-autoComplete #autocomplete orlyDisableShortcuts class="autocomplete-custom" field="label"
[(ngModel)]="selectedSearchItem"
[suggestions]="suggestionsList" [minLength]="3" [delay]="500" [showClear]="true" [group]="true"
(completeMethod)="searchAutocomplete($event)" (onSelect)="redirectToPage($event)"
(onHide)="onAutoCompleteClose()" (onClear)="clearAutocomplete();autocomplete.hide()"
(onFocus)="onAutocompleteFocus();" (onBlur)="onAutocompleteBlur();">
</p-autoComplete>


Directive Code:

export class DisableShortcutsDirective implements OnDestroy {

constructor(private shortcutService: ShortcutService) { }

@HostListener('focus', ['$event.target'])
onFocus(): void {
console.log('Focus detected: Disabling shortcuts');
this.shortcutService.disableShortcuts();
}

@HostListener('blur', ['$event.target'])
onBlur(): void {
console.log('Blur detected: Enabling shortcuts');
this.shortcutService.enableShortcuts();
}

ngOnDestroy(): void {
this.shortcutService.enableShortcuts();
}
}


Does anyone know how to solve this issue?

Continue reading...