PrimeNG Autocomplete onBlur Fires Before onSelect. How to Get Non Matching Value

Question

I have a primeNG autocomplete component that needs to run a bit code if the search term typed has not been found. Currently I have this code in the handler for the onBlur event.

The issue I am having is according to https://github.com/primefaces/primeng/issues/4403 Prime Faces treats a click on the dropdown as a click on a new element thus making the onBlur fire before the user has actually left the element.

Not sure what their reasoning for this was, but it seems to me because of this I have no way to trap the value of a true unmatched search when they leave the component. Is there another way to accomplish this?

Answer 1

I had the same issue and added a timeout of 100 milliseconds:

<p-autoComplete formControlName="country" (onSelect)="onSelectCountry()" (onBlur)="onBlurCountry()"></p-autoComplete>

onSelectCountry() {
    console.log("Selected Country");
}

onBlurCountry() {
    setTimeout(()=>{
        this.onSelectCountry()
    }, 100);
}