Resize Fabric Rect without resizing Textbox

In this jsFiddle I have a Fabric group containing a Rect and a Textbox. I need to be able to scale the Rect without scaling the text, so I'm trying to ungroup when the group is selected, and group again when the selection is cleared. Also:

• The Rect and the Textbox are grouped to be able to move them together.
• The text needs to be editable.
• The text doesn't need to be selectable.
• The text needs to be on top of the rect (i.e. should be always visible).

How to make the jsFiddle work?

NOTE

The text and the rectangle always move together, even before or after any selection.

var canvas = window._canvas = new fabric.Canvas('c');

var text = new fabric.Textbox("Some text", {
     width: 100,
     height: 22,
     fontSize: 12,
     editable: true
});

var rect = new fabric.Rect({
     width: 100,
     height: 22,
     fill: 'yellow'
});

var group = new fabric.Group([ rect, text ], {
  left: 30,
  top: 30
});

canvas.add(group);

group.on('selected', function (e){
   canvas.remove(group);
   canvas.add(rect);
   canvas.add(text);
   canvas.renderAll();
   canvas.setActiveObject(rect);

});

canvas.on('selection:cleared', function(e) {
    group = new fabric.Group([ rect, text ], {});
});

from Resize Fabric Rect without resizing Textbox