Clicking another ClickOutHandler prevents onClickOut from firing

[joukosaastamoinen]

I was shopping for a component like this for use with ES6 classes, and discovered a bug when I read the source.

If you have this:

<ClickOutHandler onClickOut={this._handleRedClickOut}>
    <div className="red" />
</ClickOutHandler>
<ClickOutHandler onClickOut={this._handleGreenClickOut}>
    <div className="green" />
</ClickOutHandler>

And you click the .red element, the _handleGreenClickOut does not get called, and vice-versa.

This is because by the time the click event bubbles up to window, its __isClickIn is set to true if the click happened inside any ClickOutHandler: https://github.com/boblauer/react-onclickout/blob/master/src/index.jsx#L26

Here's a fiddle: http://jsfiddle.net/twq0d65y/3/

[boblauer]

Thanks for the details, and the jsfiddle. Fixed and publish on npm @1.2.1

[maullerz]

There is another certain issue on react >= 15 data-reactid was removed in 15 version

[boblauer]

Yes, that's on my todo list to fix. Pull requests are welcome!