In a recent project using Angular 2, we got a request to create a customized autocomplete text box which could search, filter and create data based on user’s selection. Angular 2 being relatively new, we referenced the official Angular2 site (https://angular.io/) extensively to implement the functionality. However when we started testing across browsers, we found that our code was working on all browsers except for Firefox. More specifically, the focusout event in Angular2 was not firing. We tried to debug the issue but unfortunately failed to identify what is preventing the event from firing.
To show explain the issue better we created a small project in Plunker at https://plnkr.co/edit/E21tgRPA5VO0T7r9G4v6?p=preview where the focusout event was not working in Firefox (version 50.1.0) while working in Edge, Safari and Chrome. To get around the issue, we used the blur event and it worked fine across all browser.
Till the issue is resolved, we recommend using blur event to enable consistency across browsers.