Fix textarea focus bug when canvas is in an element that stops events…

… from reaching the body (#3754)


See example: https://jsfiddle.net/kghandi/jhd6xn4x/

* remove comments

* Update fabric.js

manually updated fabric.js for testing, since I don't know how to do a build.

* Revert "Update fabric.js"

This reverts commit d4f8e2c.

* Resolve unit test failure for textarea focus patch

Reference lowerCanvasEl instead of upperCanvasEl so the patch works for
StaticCanvas.

* Resolve unit test failure for textarea focus patch

Check for this.canvas initialized.

* Resolve unit test failure for textarea focus patch

* Resolve unit test failure for textarea focus patch

* Fix positioning of hiddenTextArea

* Update itext_behavior.mixin.js

src/mixins/itext_behavior.mixin.js

@@ -492,10 +492,6 @@
         p.y = maxHeight;
       }
 
-      // add canvas offset on document
-      p.x += this.canvas._offset.left;
-      p.y += this.canvas._offset.top;
-
       return { left: p.x + 'px', top: p.y + 'px', fontSize: charHeight };
     },
 

src/mixins/itext_key_behavior.mixin.js

@@ -9,7 +9,9 @@ fabric.util.object.extend(fabric.IText.prototype, /** @lends fabric.IText.protot
     var style = this._calcTextareaPosition();
     this.hiddenTextarea.style.cssText = 'position: absolute; top: ' + style.top + '; left: ' + style.left + ';'
                                         + ' opacity: 0; width: 0px; height: 0px; z-index: -999;';
-    fabric.document.body.appendChild(this.hiddenTextarea);
+    if (this.canvas) {
+      this.canvas.lowerCanvasEl.parentNode.appendChild(this.hiddenTextarea);
+    }
 
     fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
     fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));