Fabricjs after object move programmatically its not selectable on its new position

Question

I have tried to move the object programmatically and get success, but after the object is moved by programmatic way, its not able to select the object by selecting the object current position, still the object is selectable from by its old position I have tried with canvas.calcOffset(); still its not working.

How can I make the object selectable in its current position the code I have used as follows

Javascript

 var canvas=new fabric.Canvas('canvas');
 canvas.add(new fabric.Rect({                    
                    left:100,
                    top: 100,
                    width: 75,
                    height: 50,
                    fill: 'white',
                    stroke: 'black',
                    strokeWidth: 3,
                    padding: 10,
                    selectable: true
             }));


function changePosition()
{
    canvas.item(0).set({left:300});
    canvas.renderAll();
    canvas.calcOffset();
}

HTML

<div>
<canvas id="canvas" width="400" height="400" style="border:1px solid red"/>
</div>
<input type="button" onclick="changePosition()" value="Change Possition"/>

Jsfiddle

Steps to reproduce the error

1. Click the Change Position button
2. Try selecting the rectangle on its current position, and move to the cursor to the plave where the object was previously there you will be able to select the object

Answer 1

you need to fire setCoords() method once if you are changing object's position programmatically. This will set Coords of your object to new position.