Auto resize not wokring on textareas on different tabs

Question

I am building a razor page and are using different tabs with autoresizing textares. I have followed the solution listed as Option 2 on this link: Creating a textarea with auto-resize And it looks like this:

<script type="text/javascript">
const tx = document.getElementsByTagName("textarea");
for (let i = 0; i < tx.length; i++) {
  tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}
</script>

This solution only resizes the visible text areas. If I have one textarea on another tab in the same view the text area wont resize until I have typed something in the text area.

It is suggested to use:

$("textarea").trigger("input");

But I can't get it to do anything.

Here are the clibkable tabs:

<ul id="viewTabs" class="nav nav-tabs" style="margin-left:5px;">
    @*Create tabs*@
    @foreach (var tab in tabs)
    {
        <li class ="TabClickable" @(tab.Index == 1 ? "class=active" : "")>
            <a data-toggle="tab" href="#tab@(tab.Index.ToString())">
                <span class="tabtitle">
                    @Html.Raw(tab.Name)
                </span>
            </a>
        </li>
    }
</ul>

And the code generating a textarea looks like this.

@Html.TextAreaFor(model => model.Field.InstCustomFieldValues.Where(icfv => icfv.InstrumentId == Model.Instrument.Id).FirstOrDefault().String_Value, 1, 40, new { id = Model.Field.FieldName, Name = Model.Field.FieldName, @class = "form-control" })
                

Answer 1

The issue

All textareas that are not visible on the page will have a default height of 0. When you switch tabs and the textarea becomes visible the height is still 0.

The fix

You need to reapply the textarea resizing to the textarea AFTER it is made visible.

I recommend you do this in one of two ways:

1. Reinitialise the entire function when you click the element that makes the textarea visible.

(Please note I haven't tested this code. It's off the top of my head.)

Pure Javascript

document.addEventListener("DOMContentLoaded", function(event) { 
  resizeTx();
});

function resizeTx() {
  const tx = document.getElementsByTagName("textarea");

  for (let i = 0; i < tx.length; i++) {
    tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;");
    tx[i].addEventListener("input", OnInput, false);
  }
}

function OnInput() {
  this.style.height = "auto";
  this.style.height = (this.scrollHeight) + "px";
}

const tab = document.getElementsByClassName("TabClickable > a");

for (let i = 0; i < tx.length; i++) {
  tab[i].addEventListener("click", resizeTx, false);
}

2. Trigger the input of the now visible textarea.

const tab = document.getElementsByClassName("TabClickable > a");

for (let i = 0; i < tx.length; i++) {
  tab[i].addEventListener("click", goTextarea, false);
}

function goTextarea() {
  tx.dispatchEvent(new Event("input"));
}

---

JQuery

You should note it is a lot easier to do this in jQuery as the linked answer suggests.

$(".TabClickable > a").on("click", function(){
  $("textarea").trigger("input");
});