Group Scaling Issue Textbox Stretches and Deflates in Fabric.js Seeking Help

[DineshCodeFlow]

CheckList

• I agree to follow this project's Code of Conduct
• I have read and followed the Contributing Guide
• I have read and followed the Issue Tracker Guide
• I have searched and referenced existing issues and discussions
• I am filing a BUG report.
• I have managed to reproduce the bug after upgrading to the latest version
• I have created an accurate and minimal reproduction

Version

4.1.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

16.15.0

Link To Reproduction

https://jsfiddle.net/covationlabs/ykoqr095/

Steps To Reproduce

I am facing an issue while trying to create a group consisting of a rectangle and a text box inside it. I have created a jsfiddle link for reference (please see below):

https://jsfiddle.net/covationlabs/ykoqr095/

The problem I am facing is that when I try to scale the group using mb, mt, mr and ml, the textbox text within it either gets deflates or stretches in an undesirable way. I want the textbox text to remain fixed while scaling the group.

Can someone please guide me on how to fix this issue?

Thank you in advance.

Expected Behavior

Expecting: https://user-images.githubusercontent.com/69179167/220105453-9e85fa9a-88b6-4948-b955-21161e618339.mp4

Actual Behavior

Actual: https://jsfiddle.net/covationlabs/ykoqr095/

Error Message & Stack Trace

No error

[DineshCodeFlow]

Also tried 5.3.0. same problem

[DineshCodeFlow]

I wrote the below code and the problem is fixed with another problem:-

the rectangles flickers (The rect scaling is not smooth) https://jsfiddle.net/1u3b40xf/28/

that.on("object:scaling",
        function (e: any) {
            let group = e.target;
            // Outer container shape(Reclange, circle etc..)
            const shape = group.item(0);
            if (group.height && group.scaleY) {
                lastHeight = group.height * group.scaleY;
            }
            if (group.width && group.scaleY) {
                lastWidth = group.width * group.scaleX;
            }

            group.set({
                height: lastHeight || group.height,
                width: lastWidth || group.width,
                scaleY: 1,
            });
            shape.set({
                width: group.getScaledWidth(),
                height: group.getScaledHeight(),
                left: -shape.getScaledWidth() / 2,
                top: -shape.getScaledHeight() / 2,
            });
            that.requestRenderAll();
        });```

that is canvas.