Skip to content

Document React/Helix compatibility issues #74

@TheNando

Description

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions