Toggle resizing on materializecss textareas after populating the text

Question

Say that I have this:

<div class="row">
    <form class="col s12">
      <div class="row">
        <div class="input-field col s12">
          <textarea id="textarea1" class="materialize-textarea"></textarea>
          <label for="textarea1">Textarea</label>
        </div>
      </div>
    </form>
</div>

and say that some part of my code I run this:

$('#textarea1').text(someverylongstring)

The issue with this is that my textarea will stay "small" until I click on it and arrow down to discover the text that I added to it. When the bottom is found the textarea automagically expands to a larger textarea to accommodate the content. My question is, after adding the text to the textarea is there a way to force toggle the resizing aspect of the element?

Answer 1

Have you tried the advanced note from their docs?

When dynamically changing the value of a textarea with methods like jQuery's .val(), you must trigger an autoresize on it afterwords because .val() does not automatically trigger the events we've binded to the textarea.

So after adding your very long text, you would call this:

$('#textarea1').trigger('autoresize');