JSFiddle - React, Tailwind, and code Playground

by Sergey Linnick

HTML

<textarea class="form-control form-control-sm autoexpand valid" data-val="true" data-val-length="The field PaymentNotes must be a string with a maximum length of 500." data-val-length-max="500" id="PaymentNotes" name="PaymentNotes" placeholder="Payment notes" rows="2" aria-describedby="PaymentNotes-error" aria-invalid="false"></textarea>

JavaScript

var autoExpand = function (field) {

	// Reset field height
	field.style.height = 'inherit';

	// Get the computed styles for the element
	var computed = window.getComputedStyle(field);

	// Calculate the height
	var height = parseInt(computed.getPropertyValue('border-top-width'), 10)
	             + parseInt(computed.getPropertyValue('padding-top'), 10)
	             + field.scrollHeight
	             + parseInt(computed.getPropertyValue('padding-bottom'), 10)
	             + parseInt(computed.getPropertyValue('border-bottom-width'), 10);

	field.style.height = height + 'px';

};

document.addEventListener('input', function (event) {
	if (event.target.className.includes("autoexpand") !== true) return;
	autoExpand(event.target);
}, false);