Skip to content

Commit

Permalink
fix: autoResize issue with v-show by implementing ResizeObserver
Browse files Browse the repository at this point in the history
- 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.
  • Loading branch information
KumJungMin committed Oct 23, 2024
1 parent 69d0407 commit 3ac1ff7
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions packages/primevue/src/textarea/Textarea.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down

0 comments on commit 3ac1ff7

Please sign in to comment.