Textarea: AutoResize not working if the value is changed while textarea is not visible

[jozefnad]

Describe the bug

Autoresizing of the TextArea does not function correctly under two specific conditions:

When the TextArea is displayed after its value has been assigned, the autoresize feature fails to work as expected.

If the TextArea is located outside the viewport and its content is programmatically changed, the resizing behavior does not function correctly.

To illustrate this issue, consider the following example:

https://stackblitz.com/edit/gvf5ux?file=src%2FApp.vue

<template>
  <div class="card flex justify-content-center">
    <span v-show="show === true" class="w-20rem">
      <Textarea id="xxx" v-model="text" autoResize rows="1" class="w-full" />
    </span>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const show = ref(false);

const text = ref(`fsdfsdfsd dsfsdgsdd 
  gsdfsdg  sdgsdgsdgsd  
  sgdsdfgsdg sdgsdgsd 
  sdgsdfgs gsdgsdg 
  sdgsdgsdgsd gsdsdgsdg`);

setTimeout(() => {
  show.value = true;
}, 10);
</script>

Reproducer

https://stackblitz.com/edit/gvf5ux?file=src%2FApp.vue

PrimeVue version

3.34.1

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

No response

Steps to reproduce the behavior

1. assign text value to textarea, which is hidden
2. make textarea visible

Expected behavior

I expect the autoresize functionality of the textarea to work correctly as soon as it is displayed or changed.

[jozefnad]

You can add visibility observer for that component, so when it will be visible it will resize

const component= ref(null)
onMounted(() => {
  if(!component.value){return}

  const element = component.value
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.intersectionRatio > 0) {
        resize()
      }
    });
  });
  observer.observe(element);
})

[drien]

In case it's helpful to anyone else encountering this, I worked around it with a quick and dirty hack to the toggle method that revealed the textarea...adding and removing a single space character from the contents of the textarea triggers it to resize properly:

async toggleNotes() {
  this.notesVisible = !this.notesVisible;

  await nextTick();
  this.notes += ' ';

  await nextTick();
  this.notes = this.notes.slice(0, -1);
}

[fafeitsch]

This bug seems also to be present in version 4.0.3.

I had to use a similar workaround as drien, but I the nextTicks() didn't work in my case, so I had to resort to setTimeouts with 500ms delay to apply the hack.

[fotisskal]

Hello, any update regarding this? Do you have maybe an estimation when the fix will be added to the next version?