Doesn't work until begin type when data is predefined

[ChrisRobston]

Hello there. I have issue when I have long predefined data autosize is not working when component mounting (I am using Vue). Only when I begin to type height is sets to nornal and begin autoresize.

Why is this happening?

[jackmoore]

My assumption is that you are assigning Autosize before the predefined data has been rendered to the DOM and has layout.

The DOM element just exist in order for Autosize to have been assigned to it, but either the element hasn't been added to the DOM yet, or it's been added but has yet to be given layout (e.g. has display:none) because Autosize could not complete the sizing calculation.

I'm not that familiar with Vue. Are you assigning Autosize in the mounted lifecycle hook? That's where I would assume it would be appropriate to assign Autosize. Does the textarea have the value you want at this time of mounting? If not, you'll want to delay assigning Autosize (or call autosize.update) on the lifecycle event that happens after the value has been updated.

Autosize doesn't have detection for when the value of the textarea element has been changed without using an input event, so if you change the value of the textarea element through JavaScript you'll need to tell Autosize to rerun it's calculation by calling autosize.update.

[ChrisRobston]

Thank you @jackmoore I fix it this way

watch: {
    propValue: function () {
      this.textfieldValue = this.propValue
      this.$nextTick(function () {
        autosize.update(this.$refs.textarea)
      })
    }
  }