From 5155da9fce88ba4a5fcec22348c45c79ab97a177 Mon Sep 17 00:00:00 2001
From: Nate Evans <nate544@gmail.com>
Date: Thu, 15 Mar 2018 22:46:01 -0400
Subject: [PATCH] Use clientWidth and clientHeight of upperCanvas to size
 hiddenTextarea (#4768)

* Use clientWidth and clientHeight of upperCanvas to size hiddenTextarea to work with dynamic sized canvas.
---
 src/mixins/itext_behavior.mixin.js |  6 +++--
 test/unit/itext.js                 | 43 ++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+), 2 deletions(-)

diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js
index 4c69ba87..580584c6 100644
--- a/src/mixins/itext_behavior.mixin.js
+++ b/src/mixins/itext_behavior.mixin.js
@@ -525,8 +525,10 @@
             y: boundaries.top + boundaries.topOffset + charHeight
           },
           upperCanvas = this.canvas.upperCanvasEl,
-          maxWidth = upperCanvas.width - charHeight,
-          maxHeight = upperCanvas.height - charHeight;
+          upperCanvasWidth = upperCanvas.clientWidth || upperCanvas.width,
+          upperCanvasHeight = upperCanvas.clientHeight || upperCanvas.height,
+          maxWidth = upperCanvasWidth - charHeight,
+          maxHeight = upperCanvasHeight - charHeight;
 
       p = fabric.util.transformPoint(p, m);
       p = fabric.util.transformPoint(p, this.canvas.viewportTransform);
diff --git a/test/unit/itext.js b/test/unit/itext.js
index 640aeaa1..a0e4bb91 100644
--- a/test/unit/itext.js
+++ b/test/unit/itext.js
@@ -791,6 +791,49 @@
     iText.abortCursorAnimation();
   });
 
+  QUnit.test('hiddenTextarea does not move DOM', function(assert) {
+    if (fabric.isLikelyNode) {
+      assert.ok(true);
+      return;
+    }
+
+    var el = fabric.document.createElement('div');
+    el.id = 'itext-test-wrapper';
+    el.style.width = '100px';
+    el.style.height = '65px';
+    el.innerHTML = '<canvas id="itext-test-canvas" style="width: 100%; height: 100%;"></canvas>';
+
+    fabric.document.body.appendChild(el);
+
+    var iText = new fabric.IText('Double-click to edit', { fill: '#ffffff', fontSize: 50 });
+
+    var canvas2 = new fabric.Canvas('itext-test-canvas', { width: 2800, height: 1600, renderOnAddRemove: true });
+    canvas2.setDimensions({'max-height': '100%', 'max-width': '100%'}, { cssOnly: true });
+    canvas2.renderAll();
+
+    iText.set({
+      top: canvas2.height - iText.height,
+      left: canvas2.width - iText.width
+    });
+    canvas2.add(iText);
+
+    var widthBeforeEdit = fabric.document.documentElement.scrollWidth,
+        heightBeforeEdit = fabric.document.documentElement.scrollHeight;
+
+    iText.enterEditing();
+
+    var widthAfterEdit = fabric.document.documentElement.scrollWidth,
+        heightAfterEdit = fabric.document.documentElement.scrollHeight;
+
+    iText.exitEditing();
+
+    assert.equal(widthAfterEdit, widthBeforeEdit, 'Adding hiddenTextarea modified DOM width');
+    assert.equal(heightAfterEdit, heightBeforeEdit, 'Adding hiddenTextarea modified DOM height');
+
+    canvas2.dispose();
+    el.parentNode.removeChild(el);
+  });
+
   // QUnit.test('measuring width of words', function (assert) {
   //   var ctx = canvas.getContext('2d');
   //   var text = 'test foo bar';