React-dropzone: Hidden `onfocus` side-effect may interfere with other code

[imontiel]

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!

[okonet]

I would assume it should work but the author of the PR mentioned it doesn't. So you can try and file the PR. I'd also like to see addEventListener there.

[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.

[okonet]

@imontiel any news on this one?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity in the past 60 days. It will be closed if no further activity occurs. If the problem persists please comment here to bump your issue. Thank You - React Dropzone Maintaners

[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).