From d1bbe7253c135ceed138fd02c82b0f861d5dda6b Mon Sep 17 00:00:00 2001 From: Jermolene Date: Thu, 13 Nov 2014 11:19:21 +0000 Subject: [PATCH] Remove flicker when resizing textareas The `EditTextWidget.prototype.fixHeight()` function was defering its work with `nextTick()`, which led to flickering on all browsers when typing triggers a resize. --- core/modules/widgets/edit-text.js | 40 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 21 deletions(-) diff --git a/core/modules/widgets/edit-text.js b/core/modules/widgets/edit-text.js index 4a9d669b2..59f5ab33f 100644 --- a/core/modules/widgets/edit-text.js +++ b/core/modules/widgets/edit-text.js @@ -206,27 +206,25 @@ EditTextWidget.prototype.fixHeight = function() { var self = this, domNode = this.domNodes[0]; if(this.editAutoHeight && domNode && !domNode.isTiddlyWikiFakeDom && this.editTag === "textarea") { - $tw.utils.nextTick(function() { - // Resize the textarea to fit its content, preserving scroll position - var scrollPosition = $tw.utils.getScrollPosition(), - scrollTop = scrollPosition.y; - // Measure the specified minimum height - domNode.style.height = self.editMinHeight; - var minHeight = domNode.offsetHeight; - // Set its height to auto so that it snaps to the correct height - domNode.style.height = "auto"; - // Calculate the revised height - var newHeight = Math.max(domNode.scrollHeight + domNode.offsetHeight - domNode.clientHeight,minHeight); - // Only try to change the height if it has changed - if(newHeight !== domNode.offsetHeight) { - domNode.style.height = newHeight + "px"; - // Make sure that the dimensions of the textarea are recalculated - $tw.utils.forceLayout(domNode); - // Check that the scroll position is still visible before trying to scroll back to it - scrollTop = Math.min(scrollTop,self.document.body.scrollHeight - window.innerHeight); - window.scrollTo(scrollPosition.x,scrollTop); - } - }); + // Resize the textarea to fit its content, preserving scroll position + var scrollPosition = $tw.utils.getScrollPosition(), + scrollTop = scrollPosition.y; + // Measure the specified minimum height + domNode.style.height = self.editMinHeight; + var minHeight = domNode.offsetHeight; + // Set its height to auto so that it snaps to the correct height + domNode.style.height = "auto"; + // Calculate the revised height + var newHeight = Math.max(domNode.scrollHeight + domNode.offsetHeight - domNode.clientHeight,minHeight); + // Only try to change the height if it has changed + if(newHeight !== domNode.offsetHeight) { + domNode.style.height = newHeight + "px"; + // Make sure that the dimensions of the textarea are recalculated + $tw.utils.forceLayout(domNode); + // Check that the scroll position is still visible before trying to scroll back to it + scrollTop = Math.min(scrollTop,self.document.body.scrollHeight - window.innerHeight); + window.scrollTo(scrollPosition.x,scrollTop); + } } };