How do I enable (onSelect) event handler to run first and prevent (onBlur) event from running as well using PrimeNG autocomplete

I have a situation here and I was looking for some help. Currently developing a search autocomplete feature where options are displayed from a predefined list in the component. Now, this is how my p-autocomplete tag looks like:

 <p-autoComplete [(ngModel)]="skills" [suggestions]="filteredSkillSuggestions"
           id="skills" name="skills" #skillList="ngModel" 
           (completeMethod)="search($event)"
           [dropdown]="false" 
           [unique]="true"
           [multiple]="true"
           (keyup)=onEnterClickEvent($event)
           (onBlur)="onOutsideClick($event)"
           placeholder="Eg. Java, Angular, Terraform" 
           class="w-full p-fluid" ></p-autoComplete>

Now, there's a scenario I am trying to cater for. Let's say I am a user manually inputting text in this input but for some reason, my text does not give out any search suggestions. Ultimately, I want to be able to include it in the input when I focus out of the <p-autoComplete> tag. There is an onBlur event that can help with that so this is how I handle it:

  onOutsideClick(event: KeyboardEvent){
    let tokenInput = event.target as any
    if (tokenInput.value){
      this.skills.push(tokenInput.value)
      tokenInput.value = ""
    }
  }

This works to an extent but noticed an issue along the line. When selecting from the search suggestions, it emits an OnBlur event before the onSelect event. This in turn, runs this code above and includes both the manual input the user was typing, and the selection from the search suggestions, into the input list. Is there a way I could be able to run onSelect first and totally ignoring onBlur when onSelect runs? Any other workaround is appreciated.

I have already tried setTimeout() as suggested by this answer

To achieve the desired behavior of listening to the blur event of the input field in the autocomplete component and applying a delay before executing logic, you can follow these steps:

1. Add a template reference to the autocomplete component in your HTML file:

<h5>Basic</h5>
<p-autoComplete
  [(ngModel)]="selectedCountry"
  [suggestions]="filteredCountries"
  (onSelect)="select($event)"
  (completeMethod)="filterCountry($event)"
  #autoRef   <!-- Template reference -->
  field="name"
  [minLength]="1"
></p-autoComplete>

2. Import AfterViewInit in your component and read the autocomplete component using @viewChild:

import { AfterViewInit, ViewChild } from '@angular/core';
import { AutoComplete } from 'primeng/autocomplete';

export class YourComponent implements AfterViewInit {
  @ViewChild('autoRef') autoRef: AutoComplete;
  
  // Rest of your component code
}

3. Implement the AfterViewInit interface in your component:

export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    this.catchBlurEvent();
  }

  // Rest of your component code
}

4. Create the catchBlurEvent() function in your component. This function listens to the blur event of the input field in the autocomplete component, adds a delay using RxJS delay(), and subscribes to the event:

import { fromEvent } from 'rxjs';
import { delay } from 'rxjs/operators';

export class YourComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    this.catchBlurEvent();
  }

  catchBlurEvent() {
    fromEvent(this.autoRef.inputEL.nativeElement, 'blur')
      .pipe(delay(100))
      .subscribe((event: FocusEvent) => {
        // Your logic here
      });
  }

  // Rest of your component code
}

In the catchBlurEvent() function, fromEvent is used to create an observable from the blur event of the input field in the autocomplete component. The delay operator is then applied to introduce a delay of 100 milliseconds. Finally, the subscription handles the event and executes your desired logic.

By implementing these steps, you can listen to the blur event of the autocomplete input field and apply a delay before executing the logic, without the need to use (onBlur) in the HTML template.