title: dynamic textarea when editing form inside a modal
body: <p>Here I put the code I'm trying to make the textarea adjust the size dynamically when opening the modal.</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>$(document)
  .on('keyup input keypress keydown change', '.area1', function(e) {
     var tamanhoMin1 =  $(this).attr('rows') * $(this).css('line-height').replace(/[^0-9\.]+/g, '');
     $(this)
     .css({'height': 'auto'});
  
     var novoTamanho1 = this.scrollHeight + parseFloat($(this).css("borderTopWidth")) + parseFloat($(this).css("borderBottomWidth"));
     if (tamanhoMin1 &gt; novoTamanho1) novoTamanho1 = tamanhoMin1;
     $(this).css({'height': novoTamanho1});
  });
  
  $(".area1")
  .delay(0)
  .show(0, function() {
      var el1 = $(this);
      setTimeout(function () {
          el1.trigger('keyup');
      }, 100);        
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.area1{
    display: none;
    overflow: hidden;
    resize: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  &lt;button type="button" class="btn btn-primary edit_faq" data-toggle="modal" data-target="#add_data_Modal1" style="float: right; margin-left: 1%;"&gt;Alterar Procedimento&lt;/button&gt;
  
  &lt;div class="modal fade" id="add_data_Modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog modal-lg" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close atualizar" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;form action="" method="post" id="faqq1" class="faqq1"&gt;
            &lt;div class="card"&gt;
              &lt;div class="card-header contact-header"&gt;
                &lt;h2 class="text-center"&gt;ALTERAR PROCEDIMENTO&lt;/h2&gt;
              &lt;/div&gt;
              &lt;div class="card-body m- contact-body"&gt;
                &lt;div class="form-group mb-0"&gt;
                  &lt;label for="Procedimento1"&gt;Procedimento&lt;/label&gt;
                  &lt;textarea class="form-control area1" name="Procedimento1" id="Procedimento1" rows="2"&gt; Até pouco tempo atrás todos acreditavam que o Universo era infinito (inclusive a classe científica), nas escolas tal ideia era ensinada nas aulas de geografia, ciências, física entre outras disciplinas afins. O avanço das tecnologias e das próprias técnicas de observação do espaço sideral, acrescido de muito estudo, conduziu a física moderna a derivar outra conclusão sobre o questionamento acerca da extensão do Universo, doravante a esse processo, os físicos criaram um método para calcular o volume cúbico e chegaram ao número que é expresso da seguinte forma: o algarismo 3 e mais 72 zeros.&lt;/textarea&gt;               &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see in the example I put, the textarea doesn't adjust automatically. To auto adjust, I have to click inside the textarea and hit enter on the keyboard.</p>
  <p>Can you help to solve this problem?</p>