Cannot resize/edit objects until I group/ungroup them - AlpineJS + FabricJS

Problem reproduced here:

I'm completely at a loss at what's going on. It's a very simple setup. An AlpineJS triggered addition of a text object to a canvas. These new objects cannot be resized/edited - only moved. The resize controls appear but do not function (except to move the object).

But if I create another object (click the button again, it exhibits same non-resizable behaviour) and then group the two together (click+drag), both objects can now be resized - both as part of the group, but also once I deselect and ungroup them again.

As per the jsfiddle, I am doing the following setup on page load :

 this.canvas = new fabric.Canvas('c');

Add adding text objects like this:

var text = new fabric.Textbox('hello world', {
  left: 100,
  top: 100,
  fontSize: 20
});
this.canvas.add(text);

If I add a third text object, it has the same problem, until I add it to a group and then remove it.

Solution

I had the same issue. Looking around i found similar issues with Vue+FabricJS.

It's basically due to AlpineJS (like Vue), working with Proxy objects. Connect to your canvas using Alpine.raw()

In your case :

var text = new fabric.Textbox('hello world', {
left: 100,
top: 100,
fontSize: 20
});
Alpine.raw(this.canvas).add(text);

Should work for you :)