textarea + onFocus + stopPropagation = incorrect cursor rendering on Firefox

[felipeochoa]

What is the current behavior?
Using .stopPropagation in an onFocus event on a textarea or its parent causes the cursor to disappear or render at an incorrect location in Firefox.

You can see the vanishing cursor at this fiddle. There are no issues on Chrome and Edge, but FireFox 50.1.0 has this problem. In my full app, the cursor doesn't vanish but rather moves elsewhere (italics are placeholder text):

I have not reproduced this behavior in the fiddle.

What is the expected behavior?
It's hard to say what the expected behavior is, since the real focus event does not bubble. Here's a fiddle to show that the cursor position is not affected when the event is stopped in a vanilla-JS environment.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
The fiddle shows the issue with 15.4.1 on FF (on Windows 10). I saw the same issue on 15.3.

Why stopPropagation
Before I get eaten alive for using this, I'll just say that having a non-bubbling focus event simplifies one of the interactions I'm setting up. Specifically, my app has a bunch of widgets that can be marked active. When a user clicks into a field in the widget, that widget should be marked active. However, widgets can be nested in other widgets, in which only the inner-most widget should be marked active.

[aweary]

Thanks for the report @felipeochoa.

This is a duplicate of #10232. See my comment in that thread.

Here's a fiddle to show that the cursor position is not affected when the event is stopped in a vanilla-JS environment.

The reason this works is because it's not using a capture listener, while React's synthetic event system does.

Since this is a known issue in Firefox with no easy workaround I'm going to close this out.