Hidden `onfocus` side-effect may interfere with other code

We had this case come up in a project we were working on. We were using window.onfocus to track when our app was focused or not, but then we added react-dropzone to the application and noticed that this code was no longer working. Apparently (at least on Chrome), document.body.onfocus and window.onfocus are the same callback. So, the componentDidMount code was overriding our onfocus function.

This was most likely introduced my this change: https://github.com/okonet/react-dropzone/commit/c2b3b16e2f606ceec30b26be934ad5a1d532dc0f#diff-1fdf421c05c1140f6d71444ea2b27638R30

And I can see why this change was made. But wouldn’t the following work just as well?

  componentDidMount() {
    this.enterCounter = 0;
    window.addEventListener('focus', this.onFileDialogCancel, true);
  }

  componentWillUnmount() {
    window.removeEventListener('focus', this.onFileDialogCancel);
  }

The reason I ask instead of making a PR directly is that you might have some insight as to the problems this causes that I may not be aware of.

Thanks!

[aprilandjan]

This is still a problem because overriding onfocus cause other problems (for example, node-webkit window focus event rely on document onfocus attribute so when using React-Dropzone my previous listener bind for nw is lost).

[imontiel]

I think the problem is the focus event doesn’t actually work on document.body consistently. It is a special global event that should be attached to the window.

IE supports focus on almost every element, while FF and Chrome only support it for form elements and the window.

I’ll submit a PR when I get a chance to verify that it actually works.