fix(TextArea): autoResize issue with v-show by implementing ResizeObserver

[KumJungMin]

Defect Fixes

• fix Textarea: AutoResize not working if the value is changed while textarea is not visible #4510

Resolution

Cause

• When v-show is applied to a parent element, the height of the TextArea is not automatically adjusted.
• This happens because the TextArea component does not detect visibility changes.
• The updated hook in the TextArea is only triggered by changes in its reactive data or props, and it doesn't respond to the parent’s v-show changes.

Solution

• To address this, I implemented ResizeObserver.
• ResizeObserver detects size changes in elements and can also respond to visibility changes caused by the parent’s v-show.
• This ensures that the TextArea automatically adjusts its height when the parent’s visibility changes.

Test

test sample code

<template>
    <span v-show="value.display === true">
        <div>
            <Textarea id="xxx" v-model="value.text" autoResize rows="1" cols="30" />
        </div>
    </span>
</template>

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

const value = ref({ text: '', display: false });

setTimeout(() => {
    value.value.text = 'fsdfsdfsd dsfsdgsdd gsdfsdg  sdgsdgsdgsd  sgdsdfgsdg sdgsdgsd sdgsdfgs gsdgsdg sdgsdgsdgsd gsdsdgsdg';
}, 50);

setTimeout(() => {
    value.value.display = true;
    console.log('display');
}, 1000);
</script>

before: AutoResize is not working when v-show is set to true

2024-10-23.9.54.03.mov

after: AutoResize is working when v-show is set to true_

2024-10-23.9.54.37.mov

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
primevue	⬜️ Ignored (Inspect)	Visit Preview		Oct 23, 2024 0:59am
primevue-v3	⬜️ Ignored (Inspect)	Visit Preview		Oct 23, 2024 0:59am

[fotisskal]

hello @KumJungMin ! do you have any estimation when this will be merged to master?

[KumJungMin]

@fotisskal I'm sorry, but I’m unable to estimate a specific timeline for the merge :(