React - Synthetic blur event

First, let's have a look at what the blur event actually is.

Definition

The blur event fires when an element has lost focus. The main difference between this event and focusout is that focusout bubbles while blur does not.

-- MDN

Native browser behaviour

It is clearly saying that the blur event does not bubble up the DOM tree to all parent elements. I proved this by a CodePen demo.

Behaviour within React

But today I found out together with my colleagues that within React the synthetic blur event is bubbling to the container component in the sense that onBlur on a parent component is getting triggered by it as you can see within a CodeSandbox demo here.

React will bubble these events through its event model. So we can listen for focus and blur events at the root of a component and react to these events fired on its child nodes.

-- J. Renée Beach

So on the one hand this makes kind of sense within the React ecosystem, on the other hand not knowing that and following the native specs – which we all should follow – it can be quite confusing.

Summary

In the end, React is breaking out of the standard, the specification – and it's not the only issue with synthetic events. They are probably doing so for us, developers. It helps to mentally stay within their ecosystem, their logical rules which are also having advantages, but it is a risky discrepancy between React and the W3C standards.