React: Synthetic eventPhase doesn't reflect the synthetic phase

[likerRr]

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

What is the current behavior?
Both onClick and onClickCapture called on bubbling phase.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).

Demo shows that event phase in onClickCapture for react is incorrect: it's bubbling, but must be capturing. Moreover, event.nativeEvent also shows bubbling phase, so probably the reason is not in syntethic event.

https://jsbin.com/xebarapije/2/edit?js,console,output

What is the expected behavior?
onClickCapture calls during capturing phase
onClick calls during bubbling phase

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
react version: 15.5.4
os: win7
did this work? don't know

[mfoonirlee]

I think that syntethic event just trigger bubbling phase instead of capturing phase causing of react use bubbling event to simulate capturing event, they would use the unified type event to trigger event that user registered in event array

[likerRr]

I just can't understand, if I'm the only who use capturing phase? Or I'm the only who does it wrong? :smile: Strange, that such issue exists.

[gaearon]

I don't think it "doesn't work". Capturing itself works as expected.

The part that doesn't work is eventPhase property. The reason it doesn't work is a bit confusing.

React simulates a capturing and a bubbling phase. In reality there's just one (often top-level) event, but React walks the component tree to simulate two phases. The DOM event is caught at bubbling phase (in many cases), but React still simulates both phases based on it.

The problem is React fills all properties from DOM event by default. So you see the bubbling eventPhase in both onClick and onClickCapture because the real DOM event was caught at bubbling phase. Synthetic capture phase of React is not reflected there.

I'm not sure whether it's something that should be fixed. I guess if you send a PR to change eventPhase during event dispatch, we could consider it. I don't know that code that well.

For now I'll tag it as a bug but it will probably be low priority because checking eventPhase seems like a very rare use case.

[likerRr]

So, as far as I understood, event phases are simulated in correct order: capturing phase from body to target at first and bubbling phase from target to body at the end. But eventPhase property just doesn't change it's value and is always equals 3 (bubbling phase constant). Am I correct?

[gaearon]

I think this is right. Although I wouldn't exclude a possibility that we listen to capturing phase ourselves for some events. I haven't checked.

[aweary]

For reference, I made a quick effort at resolving this in https://github.com/facebook/react/pull/10722

[gaearon]

Not convinced this is important. The abstraction is a bit leaky anyway. I don't think we necessarily have to normalize this because I'm not sure in which real world scenarios you actually care about eventPhase. And adding bytes to support this doesn't seem worth it.

[Noyabronok]

I just came to the same conclusion but wasted an hour of my time. I was working on a demo to demonstrate how events work in react, and I wanted to use the eventPhase property to log the phase. Mine is not a mission critical scenario, but it would be nice to have this fixed so that people don't spin wheels debugging in the future.

[gaearon]

We've made a (much bigger) change to actually register Capture events in the Capture phase. So this should be resolved in React 17.