Fixed #274 - Textarea with autoResize true not displayed correctly when initially hidden

pull/310/head
cagataycivici 2020-04-17 22:56:14 +03:00
parent f352defc4c
commit 106e8cb807
1 changed files with 20 additions and 11 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<textarea ref="element" :class="['p-inputtextarea p-inputtext p-component', {'p-filled': filled, 'p-inputtextarea-resizable ': autoResize}]" v-on="listeners" :value="value"></textarea> <textarea :class="['p-inputtextarea p-inputtext p-component', {'p-filled': filled, 'p-inputtextarea-resizable ': autoResize}]" v-on="listeners" :value="value"></textarea>
</template> </template>
<script> <script>
@ -10,26 +10,35 @@ export default {
}, },
cachedScrollHeight: null, cachedScrollHeight: null,
mounted() { mounted() {
if (this.autoResize) { if (this.$el.offsetParent && this.autoResize) {
this.resize(); this.resize();
} }
}, },
updated() { updated() {
if (this.autoResize) { if (this.$el.offsetParent && this.autoResize) {
this.resize(); this.resize();
} }
}, },
methods: { methods: {
resize() { resize() {
this.$refs.element.style.height = ''; if (!this.cachedScrollHeight) {
this.$refs.element.style.height = this.$refs.element.scrollHeight + 'px'; this.cachedScrollHeight = this.$el.scrollHeight;
this.$el.style.overflow = "hidden";
}
if (parseFloat(this.$refs.element.style.height) >= parseFloat(this.$refs.element.style.maxHeight)) { if (this.cachedScrollHeight !== this.$el.scrollHeight) {
this.$refs.element.style.overflowY = "scroll"; this.$el.style.height = ''
this.$refs.element.style.height = this.$refs.element.style.maxHeight; this.$el.style.height = this.$el.scrollHeight + 'px';
if (parseFloat(this.$el.style.height) >= parseFloat(this.$el.style.maxHeight)) {
this.$el.style.overflowY = "scroll";
this.$el.style.height = this.$el.style.maxHeight;
} }
else { else {
this.$refs.element.style.overflow = "hidden"; this.$el.style.overflow = "hidden";
}
this.cachedScrollHeight = this.$el.scrollHeight;
} }
} }
}, },