From 6c198a8e95c576dd9d5b8b9a1f996963ae1ea15c Mon Sep 17 00:00:00 2001 From: Jack Moore Date: Sun, 4 Dec 2016 15:28:06 -0500 Subject: [PATCH] Fixed minor bug where the `resized` event would not fire under specific conditions when changing the overflow. --- changelog.md | 3 +++ dist/autosize.js | 20 +++++++++++--------- dist/autosize.min.js | 4 ++-- package.json | 2 +- src/autosize.js | 18 ++++++++++-------- 5 files changed, 27 insertions(+), 20 deletions(-) diff --git a/changelog.md b/changelog.md index fd98249..6813308 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,8 @@ ## Changelog +##### v.3.0.20 - 2016-12-04 +* Fixed minor bug where the `resized` event would not fire under specific conditions when changing the overflow. + ##### v.3.0.19 - 2016-11-23 * Bubble dispatched events. Merged #319. diff --git a/dist/autosize.js b/dist/autosize.js index 66e0331..998d641 100644 --- a/dist/autosize.js +++ b/dist/autosize.js @@ -1,5 +1,5 @@ /*! - Autosize 3.0.19 + Autosize 3.0.20 license: MIT http://www.jacklmoore.com/autosize */ @@ -103,8 +103,6 @@ } ta.style.overflowY = value; - - resize(); } function getParentOverflows(el) { @@ -156,25 +154,29 @@ function update() { resize(); - var computed = window.getComputedStyle(ta, null); - var computedHeight = Math.round(parseFloat(computed.height)); var styleHeight = Math.round(parseFloat(ta.style.height)); + var computed = window.getComputedStyle(ta, null); + var actualHeight = Math.round(parseFloat(computed.height)); - // The computed height not matching the height set via resize indicates that + // The actual height not matching the style height (set via the resize method) indicates that // the max-height has been exceeded, in which case the overflow should be set to visible. - if (computedHeight !== styleHeight) { + if (actualHeight !== styleHeight) { if (computed.overflowY !== 'visible') { changeOverflow('visible'); + resize(); + actualHeight = Math.round(parseFloat(window.getComputedStyle(ta, null).height)); } } else { // Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands. if (computed.overflowY !== 'hidden') { changeOverflow('hidden'); + resize(); + actualHeight = Math.round(parseFloat(window.getComputedStyle(ta, null).height)); } } - if (cachedHeight !== computedHeight) { - cachedHeight = computedHeight; + if (cachedHeight !== actualHeight) { + cachedHeight = actualHeight; var evt = createEvent('autosize:resized'); try { ta.dispatchEvent(evt); diff --git a/dist/autosize.min.js b/dist/autosize.min.js index 493ad5e..3d8366b 100644 --- a/dist/autosize.min.js +++ b/dist/autosize.min.js @@ -1,6 +1,6 @@ /*! - Autosize 3.0.19 + Autosize 3.0.20 license: MIT http://www.jacklmoore.com/autosize */ -!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),l="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(l)&&(l=0),s()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,e.style.overflowY=t,r()}function o(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}function r(){var t=e.style.height,n=o(e),r=document.documentElement&&document.documentElement.scrollTop;e.style.height="auto";var i=e.scrollHeight+l;return 0===e.scrollHeight?void(e.style.height=t):(e.style.height=i+"px",u=e.clientWidth,n.forEach(function(e){e.node.scrollTop=e.scrollTop}),void(r&&(document.documentElement.scrollTop=r)))}function s(){r();var t=window.getComputedStyle(e,null),o=Math.round(parseFloat(t.height)),i=Math.round(parseFloat(e.style.height));if(o!==i?"visible"!==t.overflowY&&n("visible"):"hidden"!==t.overflowY&&n("hidden"),a!==o){a=o;var s=d("autosize:resized");try{e.dispatchEvent(s)}catch(e){}}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!i.has(e)){var l=null,u=e.clientWidth,a=null,c=function(){e.clientWidth!==u&&s()},p=function(t){window.removeEventListener("resize",c,!1),e.removeEventListener("input",s,!1),e.removeEventListener("keyup",s,!1),e.removeEventListener("autosize:destroy",p,!1),e.removeEventListener("autosize:update",s,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),i.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",p,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",s,!1),window.addEventListener("resize",c,!1),e.addEventListener("input",s,!1),e.addEventListener("autosize:update",s,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",i.set(e,{destroy:p,update:s}),t()}}function o(e){var t=i.get(e);t&&t.destroy()}function r(e){var t=i.get(e);t&&t.update()}var i="function"==typeof Map?new Map:function(){var e=[],t=[];return{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){e.indexOf(n)===-1&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}}(),d=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var s=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(s=function(e){return e},s.destroy=function(e){return e},s.update=function(e){return e}):(s=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},s.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},s.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e}),t.exports=s}); \ No newline at end of file +!function(e,t){if("function"==typeof define&&define.amd)define(["exports","module"],t);else if("undefined"!=typeof exports&&"undefined"!=typeof module)t(exports,module);else{var n={exports:{}};t(n.exports,n),e.autosize=n.exports}}(this,function(e,t){"use strict";function n(e){function t(){var t=window.getComputedStyle(e,null);"vertical"===t.resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),s="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(s)&&(s=0),l()}function n(t){var n=e.style.width;e.style.width="0px",e.offsetWidth,e.style.width=n,e.style.overflowY=t}function o(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push({node:e.parentNode,scrollTop:e.parentNode.scrollTop}),e=e.parentNode;return t}function r(){var t=e.style.height,n=o(e),r=document.documentElement&&document.documentElement.scrollTop;e.style.height="auto";var i=e.scrollHeight+s;return 0===e.scrollHeight?void(e.style.height=t):(e.style.height=i+"px",u=e.clientWidth,n.forEach(function(e){e.node.scrollTop=e.scrollTop}),void(r&&(document.documentElement.scrollTop=r)))}function l(){r();var t=Math.round(parseFloat(e.style.height)),o=window.getComputedStyle(e,null),i=Math.round(parseFloat(o.height));if(i!==t?"visible"!==o.overflowY&&(n("visible"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))):"hidden"!==o.overflowY&&(n("hidden"),r(),i=Math.round(parseFloat(window.getComputedStyle(e,null).height))),a!==i){a=i;var l=d("autosize:resized");try{e.dispatchEvent(l)}catch(e){}}}if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!i.has(e)){var s=null,u=e.clientWidth,a=null,p=function(){e.clientWidth!==u&&l()},c=function(t){window.removeEventListener("resize",p,!1),e.removeEventListener("input",l,!1),e.removeEventListener("keyup",l,!1),e.removeEventListener("autosize:destroy",c,!1),e.removeEventListener("autosize:update",l,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),i.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",c,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",l,!1),window.addEventListener("resize",p,!1),e.addEventListener("input",l,!1),e.addEventListener("autosize:update",l,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",i.set(e,{destroy:c,update:l}),t()}}function o(e){var t=i.get(e);t&&t.destroy()}function r(e){var t=i.get(e);t&&t.update()}var i="function"==typeof Map?new Map:function(){var e=[],t=[];return{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){e.indexOf(n)===-1&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}}(),d=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){d=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?(l=function(e){return e},l.destroy=function(e){return e},l.update=function(e){return e}):(l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return n(e,t)}),e},l.destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e}),t.exports=l}); \ No newline at end of file diff --git a/package.json b/package.json index b541b73..086b9ea 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "autosize", "description": "Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.", - "version": "3.0.19", + "version": "3.0.20", "keywords": [ "textarea", "form", diff --git a/src/autosize.js b/src/autosize.js index fbe9568..e659e31 100644 --- a/src/autosize.js +++ b/src/autosize.js @@ -81,8 +81,6 @@ function assign(ta) { } ta.style.overflowY = value; - - resize(); } function getParentOverflows(el) { @@ -134,25 +132,29 @@ function assign(ta) { function update() { resize(); - const computed = window.getComputedStyle(ta, null); - const computedHeight = Math.round(parseFloat(computed.height)); const styleHeight = Math.round(parseFloat(ta.style.height)); + const computed = window.getComputedStyle(ta, null); + var actualHeight = Math.round(parseFloat(computed.height)); - // The computed height not matching the height set via resize indicates that + // The actual height not matching the style height (set via the resize method) indicates that // the max-height has been exceeded, in which case the overflow should be set to visible. - if (computedHeight !== styleHeight) { + if (actualHeight !== styleHeight) { if (computed.overflowY !== 'visible') { changeOverflow('visible'); + resize(); + actualHeight = Math.round(parseFloat(window.getComputedStyle(ta, null).height)); } } else { // Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands. if (computed.overflowY !== 'hidden') { changeOverflow('hidden'); + resize(); + actualHeight = Math.round(parseFloat(window.getComputedStyle(ta, null).height)); } } - if (cachedHeight !== computedHeight) { - cachedHeight = computedHeight; + if (cachedHeight !== actualHeight) { + cachedHeight = actualHeight; const evt = createEvent('autosize:resized'); try { ta.dispatchEvent(evt);