Bug 70934 – Moving an SVG element (in the DOM) during a mousedown prevents the following click event

• Status: NEW
• Component: UI Events

[Xavier Morel]

Created attachment 112515 [details]
Test case

This may happen for any element, I did not test it, but it happened on SVG elements for me.

Problem test case:
* Click on the partially hidden blue ellipsis on top
* Expected: print a message
✔ Observed: print a message

* Click on the partially hidden blue ellipsis in the middle group
* Expected: print a message
✔ Observed: print a message

* Click on the partially hidden blue ellipsis in the bottom group
* Expected: the blue ellipsis moves on top of the red one
* Expected: print a message
✔ Observed: the blue ellipsis moves on top of the red one
✘ Observed: *no message is printed*

All ellipsis have the exact same click handler, which prints a message (with their class name) below the SVG frame.

In the third case, the ellipsis is moved around in the DOM in order to be stacked on top of the red ellipsis (you can click on the partially hidden red ellipsis of the third group after that to do it again): as far as I know, SVG draws elements in strict document order, so the only way to have an element on top of an other is to put them in the correct order in the DOM.

Since the click event is the same on all `ellipse` elements, one would expect to see the same behavior everywhere. And indeed if you click twice on the blue ellipsis (once to put it on top of the red one and once more) you will see the message print correctly.

Context:
* Creating graphs using the Dracula library http://www.graphdracula.net/
* Dracula defers to Raphaël for the SVG backend: http://raphaeljs.com/
* Dracula handles drag&dropping nodes (by default, not sure it can be disabled) which can be seen on the front-page example, this is handled via mouse* events
* In the latest Dracula version (this does not seem to happen in the one on the front page), the `mousedown` event starting the drag makes a call to Raphael's Element#toFront: https://github.com/strathausen/dracula/blob/master/js/dracula_graph.js#L166
* Element#toFront moves the element to ensure it is the last one in its parent: https://github.com/DmitryBaranovskiy/raphael/blob/master/raphael.svg.js#L1049

As a result, when trying to hook a `click` event to a node (which Raphael supports: http://raphaeljs.com/reference.html#Element.click)… it did not work at all in Webkit browsers (and was quite annoying to track down).

[Ahmad Saleem]

I am able to reproduce the issue in attached test case for bottom group in Safari 15.6 and Safari Technical Preview 151 on macOS 12.5, where clicking on "blue" move it on top of "red" ellipsis but it does not show any message. It is same case with Chrome Canary 106 but it is different with Firefox Nightly 105, which shows this message: "Clicked movetotop".

I am changing the status to "New" now. Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/98586986>