fix(): Text broken when doing inputs

.codesandbox/templates/next/pages/index.tsx

@@ -9,26 +9,12 @@ const IndexPage: NextPage = () => {
       width: window.innerWidth,
       height: 500,
     });
-    const text = new fabric.Text('fabric.js sandbox', {
+    const text = new fabric.Textbox('fabric.js sandbox', {
       originX: 'center',
       top: 20,
     });
     canvas.add(text);
     canvas.centerObjectH(text);
-    function animate(toState: 0 | 1) {
-      text.animate(
-        { scaleX: Math.max(toState, 0.1) * 2 },
-        {
-          onChange: () => canvas.renderAll(),
-          onComplete: () => animate(Number(!toState) as 0 | 1),
-          duration: 1000,
-          easing: toState
-            ? fabric.util.ease.easeInOutQuad
-            : fabric.util.ease.easeInOutSine,
-        }
-      );
-    }
-    animate(1);
   }, []);
 
   return (

.vscode/settings.json

@@ -14,5 +14,7 @@
   "editor.codeActionsOnSave": {
     "source.organizeImports": false,
     "source.removeUnusedImports": true
-  }
+  },
+  "prettier.configPath": ".prettierrc",
+  "prettier.bracketSpacing": true
 }

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## [next]
 
+- fix(IText, Textbox): fix broken text input [#8775](https://github.com/fabricjs/fabric.js/pull/8775)
 - ci(): `.codesandbox` [#8135](https://github.com/fabricjs/fabric.js/pull/8135)
 - ci(): disallow circular deps [#8759](https://github.com/fabricjs/fabric.js/pull/8759)
 - fix(): env WebGL import cycle [#8758](https://github.com/fabricjs/fabric.js/pull/8758)

src/shapes/IText/ITextBehavior.ts

@@ -511,15 +511,14 @@ export abstract class ITextBehavior<
       return;
     }
     this.cursorOffsetCache = {};
-    this.text = this.hiddenTextarea.value;
-    if (this._shouldClearDimensionCache()) {
-      this.initDimensions();
-      this.setCoords();
-    }
+    const textarea = this.hiddenTextarea;
+    this.text = textarea.value;
+    this.initDimensions();
+    this.setCoords();
     const newSelection = this.fromStringToGraphemeSelection(
-      this.hiddenTextarea.selectionStart,
-      this.hiddenTextarea.selectionEnd,
-      this.hiddenTextarea.value
+      textarea.selectionStart,
+      textarea.selectionEnd,
+      textarea.value
     );
     this.selectionEnd = this.selectionStart = newSelection.selectionEnd;
     if (!this.inCompositionMode) {

src/shapes/IText/ITextKeyBehavior.ts

@@ -174,6 +174,19 @@ export abstract class ITextKeyBehavior<
     if (!this.isEditing) {
       return;
     }
+    const updateAndFire = () => {
+      this.updateFromTextArea();
+      this.fire('changed');
+      if (this.canvas) {
+        this.canvas.fire('text:changed', { target: this });
+        this.canvas.requestRenderAll();
+      }
+    };
+    if (this.hiddenTextarea.value === '') {
+      this.styles = {};
+      updateAndFire();
+      return;
+    }
     // decisions about style changes.
     const nextText = this._splitTextIntoLines(
         this.hiddenTextarea.value
@@ -188,16 +201,6 @@ export abstract class ITextKeyBehavior<
       charDiff = nextCharCount - charCount,
       removeFrom,
       removeTo;
-    if (this.hiddenTextarea.value === '') {
-      this.styles = {};
-      this.updateFromTextArea();
-      this.fire('changed');
-      if (this.canvas) {
-        this.canvas.fire('text:changed', { target: this });
-        this.canvas.requestRenderAll();
-      }
-      return;
-    }
 
     const textareaSelection = this.fromStringToGraphemeSelection(
       this.hiddenTextarea.selectionStart,
@@ -265,12 +268,7 @@ export abstract class ITextKeyBehavior<
       }
       this.insertNewStyleBlock(insertedText, selectionStart, copiedStyle);
     }
-    this.updateFromTextArea();
-    this.fire('changed');
-    if (this.canvas) {
-      this.canvas.fire('text:changed', { target: this });
-      this.canvas.requestRenderAll();
-    }
+    updateAndFire();
   }
 
   /**

test/unit/itext_key_behaviour.js

@@ -25,27 +25,42 @@
 
   QUnit.module('selection changes', function (hooks) {
     let iText, selection = 0, _assertCursorAnimation, _setSelection;
-    hooks.before(() => {
+    hooks.beforeEach(() => {
       iText = new fabric.IText('test need some word\nsecond line');
       iText.ctx = ctx;
       iText.on('selection:changed', () => selection++);
       _assertCursorAnimation = assertCursorAnimation.bind(null, QUnit.assert, iText);
       _setSelection = setSelection.bind(null, QUnit.assert, iText);
+      selection = 0;
     });
     hooks.after(() => {
       // needed or test hangs
       iText.dispose();
     });
-    hooks.beforeEach(() => {
-      selection = 0;
-    });
-
     QUnit.test('enterEditing', async function (assert) {
       iText.enterEditing();
       await _assertCursorAnimation(true);
       assert.equal(selection, 1, 'will fire on enter edit since the cursor is changing for the first time');
     });
 
+    QUnit.test('enterEditing and onInput', function (assert) {
+      iText.enterEditing();
+      assert.equal(iText.text.includes('__UNIQUE_TEXT_'), false, 'does not contain __UNIQUE_TEXT_');
+      const event = new (fabric.getWindow().InputEvent)("input", { inputType: "insertText", data: '__UNIQUE_TEXT_', composed: true });
+      // manually crafted events have `isTrusted` as false so they won't interact with the html element
+      iText.hiddenTextarea.value = `__UNIQUE_TEXT_${iText.hiddenTextarea.value}`;
+      iText.hiddenTextarea.dispatchEvent(event);
+      assert.equal(iText.text.includes('__UNIQUE_TEXT_'), true, 'does contain __UNIQUE_TEXT_');
+    });
+
+    QUnit.test('updateFromTextArea calls setDimensions', function (assert) {
+      iText.enterEditing();
+      assert.equal(iText.width < 400, true, 'iText is less than 400px')
+      iText.hiddenTextarea.value = `more more more more text ${iText.hiddenTextarea.value}`;
+      iText.updateFromTextArea();
+      assert.equal(iText.width > 700, true, 'iText is now more than 700px')
+    });
+
     QUnit.test('selectAll', async function (assert) {
       const done = assert.async();
       iText.selectAll();