How can I, if possible, manually triggering resize for reactive loading

[ggJSC]

I'm using React and loading information into the text area. Is there a way I can force it to resize because when my page loads info for the first time, the text area is too small.

[jackmoore]

Not sure how you have things setup, but you'll want to exclude the textarea element from reactive updates (have shouldComponentUpdate return false) since React will replace the inline styles on the textarea element that Autosize is adding.

Here's an example component of how I think it would work:

export default class extends React.Component {
  componentDidMount() {
    autosize(this._el);
  }
  shouldComponentUpdate(nextProps, nextState) {
    return false;
  }
  render() {
    return <textarea ref={el => this._el = el} defaultValue={this.props.children || ''}/>
  }
}

[ggJSC]

My bad, I was using React as an example I wasn't sure if you would know how to do it using VueJS which is what I'm using for my project. Is there any method I can call to trigger resize? I tried using jQuerys trigger with all the event listeners you attach but nothing happened.

[jackmoore]

Call autosize.update(x), where x is a textarea element, or an array or array-like object (such as a NodeList or jQuery collection). So if you are using jQuery you can call autosize.update($('your-selector')).

[jackmoore]

I believe you can't use jQuery to trigger a native custom event (it has it's own internal events system that, and you can use trigger to fire a native event or a jQuery custom event).

[ggJSC]

Beautiful. Thank you so much.

[ChrisRobston]

I have the same issue with Vue, but can't fix it. #364

@ggJSC how did you fix it?

I tried

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

But this have 0 effect (with this function my data is setting to textarea, so I am trying to update textarea same time)

[jackmoore]

I don't have experience with Vue, but my guess would be that you need to wait for the changed value to not just change, but for the change to be reflected in the DOM. I would try using the update lifecycle method instead of watch.

[ChrisRobston]

@jackmoore thanks for tip, I remembered nextTick lol

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

[WoodrowShigeru]

If the update() method turns out to be useless, consider reinitializing the element. jQuery example:

var $textarea = $('textarea.js-autosize');

// autosize.update($textarea);
autosize( $textarea.removeAttr('style') );

EDIT: As an addendum I'd like to add that I believe subsequent update() calls fail to work if the element or a parent has been display:none hidden during initialization.