From 3c6f34beed3cf1f4bd93176f62d5aec666f2f51b Mon Sep 17 00:00:00 2001
From: rockerBOO <rockerboo@gmail.com>
Date: Thu, 19 Aug 2021 20:09:57 -0400
Subject: [PATCH 1/2] feat(itext): Add hiddenTextareaAppendTo to attach
 textarea to.

This is to prevent laggy conditions where the entire body needs to
be redrawn. We can attach somewhere else off of the main body tag.
---
 src/mixins/itext_key_behavior.mixin.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/mixins/itext_key_behavior.mixin.js b/src/mixins/itext_key_behavior.mixin.js
index 5cf800cbf47..099d0f86172 100644
--- a/src/mixins/itext_key_behavior.mixin.js
+++ b/src/mixins/itext_key_behavior.mixin.js
@@ -17,7 +17,12 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top +
     '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' +
     ' paddingｰtop: ' + style.fontSize + ';';
-    fabric.document.body.appendChild(this.hiddenTextarea);
+
+    if (this.hiddenTextareaAppendTo) {
+      this.hiddenTextareaAppendTo.appendChild(this.hiddenTextarea);
+    } else {
+      fabric.document.body.appendChild(this.hiddenTextarea);
+    }
 
     fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
     fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));

From 64f662b7bfa3c4fbfdbb8912c15767d65ebe0b3a Mon Sep 17 00:00:00 2001
From: rockerBOO <rockerboo@gmail.com>
Date: Fri, 27 Aug 2021 12:35:56 -0400
Subject: [PATCH 2/2] fix: Use hiddenTextareaContainer, add default value

---
 src/mixins/itext_key_behavior.mixin.js |  7 ++++---
 src/shapes/itext.class.js              | 10 ++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/mixins/itext_key_behavior.mixin.js b/src/mixins/itext_key_behavior.mixin.js
index 099d0f86172..d45217fd7c2 100644
--- a/src/mixins/itext_key_behavior.mixin.js
+++ b/src/mixins/itext_key_behavior.mixin.js
@@ -18,9 +18,10 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     '; left: ' + style.left + '; z-index: -999; opacity: 0; width: 1px; height: 1px; font-size: 1px;' +
     ' paddingｰtop: ' + style.fontSize + ';';
 
-    if (this.hiddenTextareaAppendTo) {
-      this.hiddenTextareaAppendTo.appendChild(this.hiddenTextarea);
-    } else {
+    if (this.hiddenTextareaContainer) {
+      this.hiddenTextareaContainer.appendChild(this.hiddenTextarea);
+    }
+    else {
       fabric.document.body.appendChild(this.hiddenTextarea);
     }
 
diff --git a/src/shapes/itext.class.js b/src/shapes/itext.class.js
index fd55ab09978..e7623637e80 100644
--- a/src/shapes/itext.class.js
+++ b/src/shapes/itext.class.js
@@ -144,6 +144,16 @@
      */
     caching: true,
 
+    /**
+     * DOM container to append the hiddenTextarea.
+     * An alternative to attaching to the document.body.
+     * Useful to reduce laggish redraw of the full document.body tree and
+     * also with modals event capturing that won't let the textarea take focus.
+     * @type HTMLElement
+     * @default
+     */
+    hiddenTextareaContainer: null,
+
     /**
      * @private
      */