PaperJS onDoubleClick doesn't work on groups?

Question

Check out this Sketch. The onMouseDown event works just fine. When you click on either of the two circles they turn from red to blue.

However when you try double clicking on them, nothing happens even though there is an onDoubleClick event specifying that they should turn black. Why is this??

Here is the code:

var path = new Path.Circle(view.center - 100, 50);
var path2 = new Path.Circle(view.center - 50, 50);

// Create a group from the two paths:
var group = new Group([path, path2]);

// Set the stroke color of all items in the group:
group.strokeColor = 'black';
group.fillColor = 'red';

// Move the group to the center of the view:
group.position = view.center;

group.onMouseDown = function(event){
 group.fillColor = 'blue';
}

group.onDoubleClick = function(event){
 group.fillColor = 'black';
}

Answer 1

This is an open issue in PaperJS (https://github.com/paperjs/paper.js/issues/834). If you use a debugger to step through the PaperJS code then you will find that the child element (in this case a path element) will bubble events up to the group element. The child element determines whether a mouseup action is bubbled up as a click event or a doubleclick event. In the current PaperJS code, the child element is only bubbling up a doubleclick event when the child element itself has a onDoubleClick event handler. As a result of this issue in PaperJS, your group element is raising click events when you are expecting doubleclick events. Until the issue is fixed in PaperJS, you can work around the issue by attaching empty onDoubleClick event handlers to the child elements. For example...

path.onDoubleClick = function(event){};
path2.onDoubleClick = function(event){};
group.onDoubleClick = function(event){
    group.fillColor = 'black';
};