Capturing events trigger after vanilla bubbling events

[IPWright83]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When subscribing to DOM events it's possible to use capturing. However it seems that capturing takes place after the vanilla JavaScript bubbling phase. This results in an incorrect order of events unless all events are subscribed to via React which isn't always possible.

Here's an example that mimicks one of our use cases: https://jsbin.com/zuleceg/1/

What is the expected behavior?
A capturing event subscribed to within React, should take place before bubbling events subscribed to via vanilla JavaScript.

Which versions of React, and which browser / OS are affected by this issue?
Development edition, Chrome v64 x64

[jquense]

Yeah this is expected. The synthetic event system simulates the capturing and bubbling phases through the react component tree, it doesn't rely on the DOM event propagation at all. Part of the reason for this is to implement consistent behavior across events and browsers. Some events are natively listening during capture (like focus) for instance.

Interoperability between handlers attached via react and attached natively is always going to messy and full of gotchas like this, which is why it's not recommended. If you do need to interact with native events I'd suggest just using them encapsulated in that component and not mix them.

[IPWright83]

Thanks for your response @jquense. Is this documented somewhere as this was a surprise to us?

[aweary]

Here's a PR for adding a note about this to the official docs, feedback welcome! reactjs/react.dev#717

[gaearon]

We're fixing this in React 17.