title: jQuery - auto-expanding textarea doesn't handle pasted input
body: <p>I'm trying to auto-expand/shrink a textarea based on the entered text. The textarea has a specified height of <code>250px</code>, and can auto-expand up to <code>450px</code> before <code>overfow: auto</code> kicks in with a scrollbar. It works perfectly when text is typed into the textarea, but not when a large amount of text is pasted in.</p>
  
  <p>See fiddle here: <a href="https://jsfiddle.net/ynv6yta8/1/" rel="nofollow noreferrer">https://jsfiddle.net/ynv6yta8/1/</a></p>
  
  <p>And a snippet:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// auto-expand/shrink text area
  $('#mytextarea').bind('input propertychange paste', function() {
    var oldHeight = parseInt($(this).height());
    
    if (this.scrollHeight &lt; 450) {
      $(this).height(0).height(this.scrollHeight);
    }
  }).change();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#mytextarea {
    height: 250px;
    width: 450px;
    min-height: 250px;
    min-width: 450px;
    resize: none;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;textarea id="mytextarea"&gt;&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I didn't leave any debugging statements in the fiddle, but the event is indeed getting fired correctly on paste, but <code>this.scrollHeight</code> always evaluates to something around <code>250px</code>, even when the pasted text is very large. I guess <code>this.scrollHeight</code> hasn't been updated yet at the time the <code>paste</code> event is fired? How can I get around this?</p>