Angular2 Focusout event not working in Firefox

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.

The image on the left shows the output in Firefox and one on the right shows Chrome. The top half of the image shows functioning of focusout whereas the bottom half uses blur.
plunker output comparision

Till the issue is resolved, we recommend using blur event to enable consistency across browsers.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>