Angular Material: Prevent blur event when mat-option is selected in autocomplete

I'm trying to achieve a scenario where user has 2 different cases like below:

1. User can select an option from the autocomplete option list

OR

1. User can type a value if it matches then its considered correct and the value is shown on blur and few other operation happens.

In my case scenario 2 is working perfectly. Issue is occurring with the 1st. Whenever I select an option then the blur event also gets triggered.

I've researched and found an answer in the GitHub that this can be resolved using the answer from this link. However, this is now outdated in the modern angular versions from v16 where relatedTarget returns NULL whenever the action happens from a material component (Refer this answer).

How can I achieve this scenario to not trigger blur when user selects a mat-option?

I've created a sample example where on select of an option both 1 & 2 are getting consoled from their respective event.

Expected scenario: Only 2 should get consoled on option select.

Continue reading...