Document React/Helix compatibility issues

[TheNando]

I just learned a very important bit of info that could have saved us countless hours of troubleshooting React/Helix compatibility. This is very useful info that would be helpful to have documented in this project somewhere.

React's synthetic events work via single event listener on the document, which means that you can’t stop propagation/event bubbling of a React synthetic event to a Helix web component via the normal method (event.stopPropagation). The bubbling will only be cancelled for any React synthetic events in the chain.

Instead, you have to use event.nativeEvent.stopImmediatePropagation() from within the synthetic event handler, since synthetic event is technically attached to the document, which is always at the end of the event chain.

[CITguy]

FYI: facebook/react#12786