From 3ac1ff77ee50124c24897c7b84c5886dd49d7880 Mon Sep 17 00:00:00 2001 From: KumJungMin Date: Wed, 23 Oct 2024 21:18:23 +0900 Subject: [PATCH 1/2] fix: autoResize issue with v-show by implementing ResizeObserver - Problem: When using v-show to toggle the visibility of the Textarea component, the auto-resize functionality fails because this.$el.offsetParent returns null when the element is hidden. - Solution: Added a ResizeObserver to detect size changes and adjusted the resize logic to handle visibility changes. Now, the Textarea component correctly auto-resizes when it becomes visible and when its content or parent size changes. --- packages/primevue/src/textarea/Textarea.vue | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/packages/primevue/src/textarea/Textarea.vue b/packages/primevue/src/textarea/Textarea.vue index 2419176a9..c29fe0262 100755 --- a/packages/primevue/src/textarea/Textarea.vue +++ b/packages/primevue/src/textarea/Textarea.vue @@ -15,17 +15,27 @@ export default { $pcFluid: { default: null } }, mounted() { - if (this.$el.offsetParent && this.autoResize) { - this.resize(); + if (this.autoResize) { + this.observer = new ResizeObserver(() => { + this.resize(); + }); + this.observer.observe(this.$el); } }, updated() { - if (this.$el.offsetParent && this.autoResize) { + if (this.autoResize) { this.resize(); } }, + onBeforeUnmount() { + if (this.observer) { + this.observer.disconnect(); + } + }, methods: { resize() { + if (!this.$el.offsetParent) return; + this.$el.style.height = 'auto'; this.$el.style.height = this.$el.scrollHeight + 'px'; From 656ac72dd46332cf4c8b942c76cf3c50159197a5 Mon Sep 17 00:00:00 2001 From: KumJungMin Date: Wed, 23 Oct 2024 21:59:36 +0900 Subject: [PATCH 2/2] fix: convert onBeforeUnmount to beforeUnmount hook --- packages/primevue/src/textarea/Textarea.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/primevue/src/textarea/Textarea.vue b/packages/primevue/src/textarea/Textarea.vue index c29fe0262..b9d83901f 100755 --- a/packages/primevue/src/textarea/Textarea.vue +++ b/packages/primevue/src/textarea/Textarea.vue @@ -27,7 +27,7 @@ export default { this.resize(); } }, - onBeforeUnmount() { + beforeUnmount() { if (this.observer) { this.observer.disconnect(); }