From 6493bdb8a89cbaf39f8a40a65bd468c3130c3002 Mon Sep 17 00:00:00 2001 From: kghandi Date: Tue, 14 Mar 2017 07:36:38 -0400 Subject: [PATCH] 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 d4f8e2c6a44aa4be92a3dced85020241fac0ea29. * 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 | 4 ---- src/mixins/itext_key_behavior.mixin.js | 4 +++- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/src/mixins/itext_behavior.mixin.js b/src/mixins/itext_behavior.mixin.js index ddd48ae5..293540e0 100644 --- a/src/mixins/itext_behavior.mixin.js +++ b/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 }; }, diff --git a/src/mixins/itext_key_behavior.mixin.js b/src/mixins/itext_key_behavior.mixin.js index a475b521..bf068ab5 100644 --- a/src/mixins/itext_key_behavior.mixin.js +++ b/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));