Fork me on GitHub

My previous post seems to be a general problem so I'll try to reword it in general terms. A parent joins on a list of children. Each child registers a onMouseDown, a onMouseUp and an onClick event. A click on a child will fire those events in that order, as expected. BUT. In the case where onMouseDown reorders that list of children via a mutation, inducing a re-render before other events are processed, onClick is mysteriously NOT fired. However, onMouseUp fires as expected. This is weird because the definition of a click is exactly that, mouse or pointer going down and up on the same element. Furthermore, the dom elements don't even move (position: absolute). Nothing mysteriously unmounts/remounts. Re-rendering right after onMouseDown and before other events is not the problem. Reordering the list is. Same happens with onPointerDown and onPointerUp. Children are properly keyed, React does not complain.


all sounds very frustrating! did you try to use a ref and see if it changes somehow? Do you do anything to the event in the onMouseUp? E.g. preventDefault/stopPropagation?


Indeed it is! The ref does not seem to change and I am 100% positive there is no preventDefault or stopPropagation...


happens across all browsers? I guess it sounds like a react/DOM bug.