Canvas KineticJS - error when I release mouse above shape

Question

I'm having some trouble with Kineticjs when creating a rectangle by clicking and draggning.

$('#my-canvas').mousedown(function() {

    // Create rectangle
    // Add rectangle to layer
    // Draw layer
});

// Dragging
$('#my-canvas').mousemove(function() {
    // Update rectangles size/position so that it matches the current mouse position
    // Draw layer
});

Then when I release (mouseup), I get the following error:

Uncaught TypeError: Cannot read property '_id' of undefined
Kinetic.Util.addMethods._mouseup
(anonymous function)

If I make sure the mouse is not on the rectangle when releasing it I don't get the error. But since I'm using the mouse to drag out the rectangle the mouse position is going to be at rectangles end position.

I've searched and searched with no result.

Thanks in advance.

UPDATE

Here's a fiddle showing what I mean: http://jsfiddle.net/DfsFL/1/

Chrome gives the error that I posted a few paragraphs above, FireFox gives "TypeError: this.clickStartShape is undefined". Important note: If you remove 'stroke' and 'strokeWidth' where I create the rectangle it works just fine. Is this a bug, or am I doing something wrong?

Answer 1

As I just stumbled across a similar issue:

This should be fixed with Kinetic 5; here, the respective method includes an explicit check for the (previously undefined ) clickStartShape .

...

if(Kinetic.listenClickTap && clickStartShape && clickStartShape._id === shape._id) {
    shape._fireAndBubble(CLICK, evt);

    if(fireDblClick) {
        shape._fireAndBubble(DBL_CLICK, evt);
    }
}

...

(Beginning from line 9040 in non-minimized Kinetic 5.0.1)