autosize - npm Package Compare versions

Comparing version 5.0.2 to 6.0.0

changelog.md

 ## Changelog
 
+##### v.6.0.0 - 2023-02-10
+* Reworked to remove use of cached (potentially stale) style values. Fixes #404
+* Dropped support for Internet Explorer
+
 ##### v.5.0.2 - 2022-11-20
@@ -4,0 +8,0 @@ * Avoid issue caused by using 'smooth' scroll-behavior

dist/autosize.esm.js

@@ -1,1 +0,1 @@
-var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).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 function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,a=function(){e.clientWidth!==i&&p()},d=function(t){window.removeEventListener("resize",a,!1),e.removeEventListener("input",p,!1),e.removeEventListener("keyup",p,!1),e.removeEventListener("autosize:destroy",d,!1),e.removeEventListener("autosize:update",p,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.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",d,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",p,!1),window.addEventListener("resize",a,!1),e.addEventListener("input",p,!1),e.addEventListener("autosize:update",p,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:d,update:p}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),p()}function s(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t}function u(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&(e.parentNode.style.scrollBehavior="auto",t.push([e.parentNode,e.parentNode.scrollTop])),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0];t.scrollTop=e[1],t.style.scrollBehavior=null})}}(e);e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t()}}function p(){u();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(s("scroll"),u(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(s("hidden"),u(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i)}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e});var a=l;export default a;
+var e=new Map;function t(t){var r=e.get(t);r&&r.destroy()}function r(t){var r=e.get(t);r&&r.update()}var o=null;"undefined"==typeof window?((o=function(e){return e}).destroy=function(e){return e},o.update=function(e){return e}):((o=function(t,r){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var r=null,o=window.getComputedStyle(t),n=function(r){window.removeEventListener("resize",l,!1),t.removeEventListener("input",l,!1),t.removeEventListener("keyup",l,!1),t.removeEventListener("autosize:destroy",n,!1),t.removeEventListener("autosize:update",l,!1),Object.keys(r).forEach(function(e){return t.style[e]=r[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",n,!1),window.addEventListener("resize",l,!1),t.addEventListener("input",l,!1),t.addEventListener("autosize:update",l,!1),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:n,update:l}),l()}function l(e){void 0===e&&(e=null);var n=o.overflowY;if(0!==t.scrollHeight){var i,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],r=e[1];t.style.scrollBehavior="auto",t.scrollTop=r,t.style.scrollBehavior=null})}}(t);if(t.style.height="","vertical"===o.resize?t.style.resize="none":"both"===o.resize&&(t.style.resize="horizontal"),i="content-box"===o.boxSizing?t.scrollHeight-(parseFloat(o.paddingTop)+parseFloat(o.paddingBottom)):t.scrollHeight+parseFloat(o.borderTopWidth)+parseFloat(o.borderBottomWidth),"none"!==o.maxHeight&&i>parseFloat(o.maxHeight)?("hidden"===o.overflowY&&(t.style.overflow="scroll"),i=parseFloat(o.maxHeight)):"hidden"!==o.overflowY&&(t.style.overflow="hidden"),t.style.height=i+"px",e&&(t.style.textAlign=e),a(),r!==i&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),r=i),n!==o.overflow&&!e){var s=o.textAlign;"hidden"===o.overflow&&(t.style.textAlign="start"===s?"end":"start"),l(s)}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},o.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e});var n=o;export default n;

dist/autosize.js

@@ -6,90 +6,9 @@ (function (global, factory) {
 }(this, (function () {
-	var map = typeof Map === "function" ? new Map() : function () {
-	  var keys = [];
-	  var values = [];
-	  return {
-	    has: function has(key) {
-	      return keys.indexOf(key) > -1;
-	    },
-	    get: function get(key) {
-	      return values[keys.indexOf(key)];
-	    },
-	    set: function set(key, value) {
-	      if (keys.indexOf(key) === -1) {
-	        keys.push(key);
-	        values.push(value);
-	      }
-	    },
-	    "delete": function _delete(key) {
-	      var index = keys.indexOf(key);
+	var assignedElements = new Map();
 
-	      if (index > -1) {
-	        keys.splice(index, 1);
-	        values.splice(index, 1);
-	      }
-	    }
-	  };
-	}();
-
-	var createEvent = function createEvent(name) {
-	  return new Event(name, {
-	    bubbles: true
-	  });
-	};
-
-	try {
-	  new Event('test');
-	} catch (e) {
-	  // IE does not support `new Event()`
-	  createEvent = function createEvent(name) {
-	    var evt = document.createEvent('Event');
-	    evt.initEvent(name, true, false);
-	    return evt;
-	  };
-	}
-
 	function assign(ta) {
-	  if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return;
-	  var heightOffset = null;
-	  var clientWidth = null;
-	  var cachedHeight = null;
+	  if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || assignedElements.has(ta)) return;
+	  var previousHeight = null;
 
-	  function init() {
-	    var style = window.getComputedStyle(ta, null);
-
-	    if (style.resize === 'vertical') {
-	      ta.style.resize = 'none';
-	    } else if (style.resize === 'both') {
-	      ta.style.resize = 'horizontal';
-	    }
-
-	    if (style.boxSizing === 'content-box') {
-	      heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom));
-	    } else {
-	      heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
-	    } // Fix when a textarea is not on document body and heightOffset is Not a Number
-
-
-	    if (isNaN(heightOffset)) {
-	      heightOffset = 0;
-	    }
-
-	    update();
-	  }
-
-	  function changeOverflow(value) {
-	    {
-	      // Chrome/Safari-specific fix:
-	      // When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
-	      // made available by removing the scrollbar. The following forces the necessary text reflow.
-	      var width = ta.style.width;
-	      ta.style.width = '0px'; // Force reflow:
-	      /* jshint ignore:end */
-
-	      ta.style.width = width;
-	    }
-	    ta.style.overflowY = value;
-	  }
-
-	  function bookmarkOverflows(el) {
+	  function cacheScrollTops(el) {
 	    var arr = [];
@@ -99,3 +18,2 @@
 	      if (el.parentNode.scrollTop) {
-	        el.parentNode.style.scrollBehavior = 'auto';
 	        arr.push([el.parentNode, el.parentNode.scrollTop]);
@@ -111,2 +29,3 @@ }
 	            scrollTop = _ref[1];
+	        node.style.scrollBehavior = 'auto';
 	        node.scrollTop = scrollTop;
@@ -118,60 +37,76 @@ node.style.scrollBehavior = null;
 
-	  function resize() {
+	  var computed = window.getComputedStyle(ta);
+
+	  function update(cachedTextAlign) {
+	    if (cachedTextAlign === void 0) {
+	      cachedTextAlign = null;
+	    }
+
+	    var initialOverflowY = computed.overflowY;
+
 	    if (ta.scrollHeight === 0) {
 	      // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
 	      return;
-	    } // remove smooth scroll & prevent scroll-position jumping by restoring original scroll position
+	    } // ensure the scrollTop values of parent elements are not modified as a consequence of calculating the textarea height
 
 
-	    var restoreOverflows = bookmarkOverflows(ta);
-	    ta.style.height = '';
-	    ta.style.height = ta.scrollHeight + heightOffset + 'px'; // used to check if an update is actually necessary on window.resize
+	    var restoreScrollTops = cacheScrollTops(ta);
+	    ta.style.height = ''; // this is necessary for to scrollHeight to accurately reflect situations where the textarea should shrink
+	    // disallow vertical resizing
 
-	    clientWidth = ta.clientWidth;
-	    restoreOverflows();
-	  }
+	    if (computed.resize === 'vertical') {
+	      ta.style.resize = 'none';
+	    } else if (computed.resize === 'both') {
+	      ta.style.resize = 'horizontal';
+	    }
 
-	  function update() {
-	    resize();
-	    var styleHeight = Math.round(parseFloat(ta.style.height));
-	    var computed = window.getComputedStyle(ta, null); // Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box
+	    var newHeight;
 
-	    var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; // 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 allowed.
+	    if (computed.boxSizing === 'content-box') {
+	      newHeight = ta.scrollHeight - (parseFloat(computed.paddingTop) + parseFloat(computed.paddingBottom));
+	    } else {
+	      newHeight = ta.scrollHeight + parseFloat(computed.borderTopWidth) + parseFloat(computed.borderBottomWidth);
+	    }
 
-	    if (actualHeight < styleHeight) {
+	    if (computed.maxHeight !== 'none' && newHeight > parseFloat(computed.maxHeight)) {
 	      if (computed.overflowY === 'hidden') {
-	        changeOverflow('scroll');
-	        resize();
-	        actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
+	        ta.style.overflow = 'scroll';
 	      }
-	    } else {
-	      // Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands.
-	      if (computed.overflowY !== 'hidden') {
-	        changeOverflow('hidden');
-	        resize();
-	        actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
-	      }
+
+	      newHeight = parseFloat(computed.maxHeight);
+	    } else if (computed.overflowY !== 'hidden') {
+	      ta.style.overflow = 'hidden';
 	    }
 
-	    if (cachedHeight !== actualHeight) {
-	      cachedHeight = actualHeight;
-	      var evt = createEvent('autosize:resized');
+	    ta.style.height = newHeight + 'px';
 
-	      try {
-	        ta.dispatchEvent(evt);
-	      } catch (err) {// Firefox will throw an error on dispatchEvent for a detached element
-	        // https://bugzilla.mozilla.org/show_bug.cgi?id=889376
+	    if (cachedTextAlign) {
+	      ta.style.textAlign = cachedTextAlign;
+	    }
+
+	    restoreScrollTops();
+
+	    if (previousHeight !== newHeight) {
+	      ta.dispatchEvent(new Event('autosize:resized', {
+	        bubbles: true
+	      }));
+	      previousHeight = newHeight;
+	    }
+
+	    if (initialOverflowY !== computed.overflow && !cachedTextAlign) {
+	      var textAlign = computed.textAlign;
+
+	      if (computed.overflow === 'hidden') {
+	        // Webkit fails to reflow text after overflow is hidden,
+	        // even if hiding overflow would allow text to fit more compactly.
+	        // The following is intended to force the necessary text reflow.
+	        ta.style.textAlign = textAlign === 'start' ? 'end' : 'start';
 	      }
+
+	      update(textAlign);
 	    }
 	  }
 
-	  var pageResize = function pageResize() {
-	    if (ta.clientWidth !== clientWidth) {
-	      update();
-	    }
-	  };
-
 	  var destroy = function (style) {
-	    window.removeEventListener('resize', pageResize, false);
+	    window.removeEventListener('resize', update, false);
 	    ta.removeEventListener('input', update, false);
@@ -182,8 +117,9 @@ ta.removeEventListener('keyup', update, false);
 	    Object.keys(style).forEach(function (key) {
-	      ta.style[key] = style[key];
+	      return ta.style[key] = style[key];
 	    });
-	    map["delete"](ta);
+	    assignedElements["delete"](ta);
 	  }.bind(ta, {
 	    height: ta.style.height,
 	    resize: ta.style.resize,
+	    textAlign: ta.style.textAlign,
 	    overflowY: ta.style.overflowY,
@@ -194,11 +130,4 @@ overflowX: ta.style.overflowX,
 
-	  ta.addEventListener('autosize:destroy', destroy, false); // IE9 does not fire onpropertychange or oninput for deletions,
-	  // so binding to onkeyup to catch most of those events.
-	  // There is no way that I know of to detect something like 'cut' in IE9.
-
-	  if ('onpropertychange' in ta && 'oninput' in ta) {
-	    ta.addEventListener('keyup', update, false);
-	  }
-
-	  window.addEventListener('resize', pageResize, false);
+	  ta.addEventListener('autosize:destroy', destroy, false);
+	  window.addEventListener('resize', update, false);
 	  ta.addEventListener('input', update, false);
@@ -208,11 +137,11 @@ ta.addEventListener('autosize:update', update, false);
 	  ta.style.wordWrap = 'break-word';
-	  map.set(ta, {
+	  assignedElements.set(ta, {
 	    destroy: destroy,
 	    update: update
 	  });
-	  init();
+	  update();
 	}
 
 	function destroy(ta) {
-	  var methods = map.get(ta);
+	  var methods = assignedElements.get(ta);
 
@@ -225,3 +154,3 @@ if (methods) {
 	function update(ta) {
-	  var methods = map.get(ta);
+	  var methods = assignedElements.get(ta);
 
@@ -233,5 +162,5 @@ if (methods) {
 
-	var autosize = null; // Do nothing in Node.js environment and IE8 (or lower)
+	var autosize = null; // Do nothing in Node.js environment
 
-	if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
+	if (typeof window === 'undefined') {
 	  autosize = function autosize(el) {
@@ -238,0 +167,0 @@ return el;

dist/autosize.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).autosize=t()}(this,function(){var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;return"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).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 function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,a=function(){e.clientWidth!==i&&f()},d=function(t){window.removeEventListener("resize",a,!1),e.removeEventListener("input",f,!1),e.removeEventListener("keyup",f,!1),e.removeEventListener("autosize:destroy",d,!1),e.removeEventListener("autosize:update",f,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.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",d,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",f,!1),window.addEventListener("resize",a,!1),e.addEventListener("input",f,!1),e.addEventListener("autosize:update",f,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:d,update:f}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),f()}function s(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t}function u(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&(e.parentNode.style.scrollBehavior="auto",t.push([e.parentNode,e.parentNode.scrollTop])),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0];t.scrollTop=e[1],t.style.scrollBehavior=null})}}(e);e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t()}}function f(){u();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(s("scroll"),u(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(s("hidden"),u(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i)}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),l});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).autosize=t()}(this,function(){var e=new Map;function t(t){var o=e.get(t);o&&o.destroy()}function o(t){var o=e.get(t);o&&o.update()}var r=null;return"undefined"==typeof window?((r=function(e){return e}).destroy=function(e){return e},r.update=function(e){return e}):((r=function(t,o){return t&&Array.prototype.forEach.call(t.length?t:[t],function(t){return function(t){if(t&&t.nodeName&&"TEXTAREA"===t.nodeName&&!e.has(t)){var o=null,r=window.getComputedStyle(t),n=function(o){window.removeEventListener("resize",i,!1),t.removeEventListener("input",i,!1),t.removeEventListener("keyup",i,!1),t.removeEventListener("autosize:destroy",n,!1),t.removeEventListener("autosize:update",i,!1),Object.keys(o).forEach(function(e){return t.style[e]=o[e]}),e.delete(t)}.bind(t,{height:t.style.height,resize:t.style.resize,textAlign:t.style.textAlign,overflowY:t.style.overflowY,overflowX:t.style.overflowX,wordWrap:t.style.wordWrap});t.addEventListener("autosize:destroy",n,!1),window.addEventListener("resize",i,!1),t.addEventListener("input",i,!1),t.addEventListener("autosize:update",i,!1),t.style.overflowX="hidden",t.style.wordWrap="break-word",e.set(t,{destroy:n,update:i}),i()}function i(e){void 0===e&&(e=null);var n=r.overflowY;if(0!==t.scrollHeight){var l,a=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&t.push([e.parentNode,e.parentNode.scrollTop]),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0],o=e[1];t.style.scrollBehavior="auto",t.scrollTop=o,t.style.scrollBehavior=null})}}(t);if(t.style.height="","vertical"===r.resize?t.style.resize="none":"both"===r.resize&&(t.style.resize="horizontal"),l="content-box"===r.boxSizing?t.scrollHeight-(parseFloat(r.paddingTop)+parseFloat(r.paddingBottom)):t.scrollHeight+parseFloat(r.borderTopWidth)+parseFloat(r.borderBottomWidth),"none"!==r.maxHeight&&l>parseFloat(r.maxHeight)?("hidden"===r.overflowY&&(t.style.overflow="scroll"),l=parseFloat(r.maxHeight)):"hidden"!==r.overflowY&&(t.style.overflow="hidden"),t.style.height=l+"px",e&&(t.style.textAlign=e),a(),o!==l&&(t.dispatchEvent(new Event("autosize:resized",{bubbles:!0})),o=l),n!==r.overflow&&!e){var s=r.textAlign;"hidden"===r.overflow&&(t.style.textAlign="start"===s?"end":"start"),i(s)}}}}(t)}),t}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],t),e},r.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],o),e}),r});

package.json

 {
   "name": "autosize",
   "description": "Autosize is a small, stand-alone script to automatically adjust textarea height to fit text.",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "keywords": [
@@ -6,0 +6,0 @@ "textarea",

readme.md

@@ -14,8 +14,2 @@ ## Summary
 
-#### Browser compatibility
-
-Chrome | Firefox | IE | Safari | iOS Safari | Android | Opera Mini | Windows Phone IE
------- | --------|----|--------|------------|---------|------------|------------------
-yes    | yes     | 9  | yes    | yes        | 4       | ?          | 8.1
-
 #### Usage
@@ -22,0 +16,0 @@

src/autosize.js

@@ -1,87 +0,9 @@
-const map = (typeof Map === "function") ? new Map() : (function () {
-	const keys = [];
-	const values = [];
+const assignedElements = new Map();
 
-	return {
-		has(key) {
-			return keys.indexOf(key) > -1;
-		},
-		get(key) {
-			return values[keys.indexOf(key)];
-		},
-		set(key, value) {
-			if (keys.indexOf(key) === -1) {
-				keys.push(key);
-				values.push(value);
-			}
-		},
-		delete(key) {
-			const index = keys.indexOf(key);
-			if (index > -1) {
-				keys.splice(index, 1);
-				values.splice(index, 1);
-			}
-		},
-	}
-})();
-
-let createEvent = (name)=> new Event(name, {bubbles: true});
-try {
-	new Event('test');
-} catch(e) {
-	// IE does not support `new Event()`
-	createEvent = (name)=> {
-		const evt = document.createEvent('Event');
-		evt.initEvent(name, true, false);
-		return evt;
-	};
-}
-
 function assign(ta) {
-	if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return;
+	if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || assignedElements.has(ta)) return;
 
-	let heightOffset = null;
-	let clientWidth = null;
-	let cachedHeight = null;
+	let previousHeight = null;
 
-	function init() {
-		const style = window.getComputedStyle(ta, null);
-
-		if (style.resize === 'vertical') {
-			ta.style.resize = 'none';
-		} else if (style.resize === 'both') {
-			ta.style.resize = 'horizontal';
-		}
-
-		if (style.boxSizing === 'content-box') {
-			heightOffset = -(parseFloat(style.paddingTop)+parseFloat(style.paddingBottom));
-		} else {
-			heightOffset = parseFloat(style.borderTopWidth)+parseFloat(style.borderBottomWidth);
-		}
-		// Fix when a textarea is not on document body and heightOffset is Not a Number
-		if (isNaN(heightOffset)) {
-			heightOffset = 0;
-		}
-
-		update();
-	}
-
-	function changeOverflow(value) {
-		{
-			// Chrome/Safari-specific fix:
-			// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
-			// made available by removing the scrollbar. The following forces the necessary text reflow.
-			const width = ta.style.width;
-			ta.style.width = '0px';
-			// Force reflow:
-			/* jshint ignore:start */
-			ta.offsetWidth;
-			/* jshint ignore:end */
-			ta.style.width = width;
-		}
-
-		ta.style.overflowY = value;
-	}
-
-	function bookmarkOverflows(el) {
+	function cacheScrollTops(el) {
 		const arr = [];
@@ -91,3 +13,2 @@
 			if (el.parentNode.scrollTop) {
-				el.parentNode.style.scrollBehavior = 'auto';
 				arr.push([el.parentNode, el.parentNode.scrollTop]);
@@ -99,2 +20,3 @@ }
 		return ()=> arr.forEach(([node, scrollTop]) => {
+			node.style.scrollBehavior = 'auto';
 			node.scrollTop = scrollTop;
@@ -105,3 +27,7 @@ node.style.scrollBehavior = null;
 
-	function resize() {
+	const computed = window.getComputedStyle(ta);
+
+	function update(cachedTextAlign = null) {
+		let initialOverflowY = computed.overflowY;
+
 		if (ta.scrollHeight === 0) {
@@ -112,60 +38,60 @@ // If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
 
-		// remove smooth scroll & prevent scroll-position jumping by restoring original scroll position
-		const restoreOverflows = bookmarkOverflows(ta);
+		// ensure the scrollTop values of parent elements are not modified as a consequence of calculating the textarea height
+		const restoreScrollTops = cacheScrollTops(ta);
 
-		ta.style.height = '';
-		ta.style.height = (ta.scrollHeight+heightOffset)+'px';
+		ta.style.height = ''; // this is necessary for to scrollHeight to accurately reflect situations where the textarea should shrink
 
-		// used to check if an update is actually necessary on window.resize
-		clientWidth = ta.clientWidth;
+		// disallow vertical resizing
+		if (computed.resize === 'vertical') {
+			ta.style.resize = 'none';
+		} else if (computed.resize === 'both') {
+			ta.style.resize = 'horizontal';
+		}
 
-		restoreOverflows();
-	}
+		let newHeight;
 
-	function update() {
-		resize();
+		if (computed.boxSizing === 'content-box') {
+			newHeight = ta.scrollHeight - (parseFloat(computed.paddingTop)+parseFloat(computed.paddingBottom));
+		} else {
+			newHeight = ta.scrollHeight + parseFloat(computed.borderTopWidth)+parseFloat(computed.borderBottomWidth);
+		}
 
-		const styleHeight = Math.round(parseFloat(ta.style.height));
-		const computed = window.getComputedStyle(ta, null);
-
-		// Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box
-		var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight;
-
-		// 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 allowed.
-		if (actualHeight < styleHeight) {
+		if (computed.maxHeight !== 'none' && newHeight > parseFloat(computed.maxHeight)) {
 			if (computed.overflowY === 'hidden') {
-				changeOverflow('scroll');
-				resize();
-				actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
+				ta.style.overflow = 'scroll';
 			}
-		} else {
-			// Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands.
-			if (computed.overflowY !== 'hidden') {
-				changeOverflow('hidden');
-				resize();
-				actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight;
-			}
+			newHeight = parseFloat(computed.maxHeight);
+		} else if (computed.overflowY !== 'hidden') {
+			ta.style.overflow = 'hidden';
 		}
 
-		if (cachedHeight !== actualHeight) {
-			cachedHeight = actualHeight;
-			const evt = createEvent('autosize:resized');
-			try {
-				ta.dispatchEvent(evt);
-			} catch (err) {
-				// Firefox will throw an error on dispatchEvent for a detached element
-				// https://bugzilla.mozilla.org/show_bug.cgi?id=889376
+		ta.style.height = newHeight+'px';
+
+		if (cachedTextAlign) {
+			ta.style.textAlign = cachedTextAlign;
+		}
+
+		restoreScrollTops();
+
+		if (previousHeight !== newHeight) {
+			ta.dispatchEvent(new Event('autosize:resized', {bubbles: true}));
+			previousHeight = newHeight;
+		}
+
+		if (initialOverflowY !== computed.overflow && !cachedTextAlign) {
+			const textAlign = computed.textAlign;
+
+			if (computed.overflow === 'hidden') {
+				// Webkit fails to reflow text after overflow is hidden,
+				// even if hiding overflow would allow text to fit more compactly.
+				// The following is intended to force the necessary text reflow.
+				ta.style.textAlign = textAlign === 'start' ? 'end' : 'start';
 			}
+
+			update(textAlign);
 		}
 	}
 
-	const pageResize = () => {
-		if (ta.clientWidth !== clientWidth) {
-			update();
-		}
-	};
-
 	const destroy = (style => {
-		window.removeEventListener('resize', pageResize, false);
+		window.removeEventListener('resize', update, false);
 		ta.removeEventListener('input', update, false);
@@ -175,11 +101,8 @@ ta.removeEventListener('keyup', update, false);
 		ta.removeEventListener('autosize:update', update, false);
-
-		Object.keys(style).forEach(key => {
-			ta.style[key] = style[key];
-		});
-
-		map.delete(ta);
+		Object.keys(style).forEach(key => ta.style[key] = style[key]);
+		assignedElements.delete(ta);
 	}).bind(ta, {
 		height: ta.style.height,
 		resize: ta.style.resize,
+		textAlign: ta.style.textAlign,
 		overflowY: ta.style.overflowY,
@@ -192,10 +115,3 @@ overflowX: ta.style.overflowX,
 
-	// IE9 does not fire onpropertychange or oninput for deletions,
-	// so binding to onkeyup to catch most of those events.
-	// There is no way that I know of to detect something like 'cut' in IE9.
-	if ('onpropertychange' in ta && 'oninput' in ta) {
-		ta.addEventListener('keyup', update, false);
-	}
-
-	window.addEventListener('resize', pageResize, false);
+	window.addEventListener('resize', update, false);
 	ta.addEventListener('input', update, false);
@@ -206,3 +122,3 @@ ta.addEventListener('autosize:update', update, false);
 
-	map.set(ta, {
+	assignedElements.set(ta, {
 		destroy,
@@ -212,7 +128,7 @@ update,
 
-	init();
+	update();
 }
 
 function destroy(ta) {
-	const methods = map.get(ta);
+	const methods = assignedElements.get(ta);
 	if (methods) {
@@ -224,3 +140,3 @@ methods.destroy();
 function update(ta) {
-	const methods = map.get(ta);
+	const methods = assignedElements.get(ta);
 	if (methods) {
@@ -233,4 +149,4 @@ methods.update();
 
-// Do nothing in Node.js environment and IE8 (or lower)
-if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') {
+// Do nothing in Node.js environment
+if (typeof window === 'undefined') {
 	autosize = el => el;
@@ -237,0 +153,0 @@ autosize.destroy = el => el;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

22320

decreased by-21.81%

Lines of code

314

decreased by-32.47%

Number of lines in readme file

30

decreased by-16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes