ref doesn't accept a function as ref?

Autosize is not working when I pass a function instead of a ref object.

However, React does support functions. And react-textarea-autosize documentation states it does too: <TextareaAutosize ref={(tag) => (this.textarea = tag)} />

Looking at the code, there’s the assumption that it’s an object with the current prop. So, no check for functions

  componentDidMount() {
    ...
    if (typeof maxRows === "number" || async) {
      ...
      setTimeout(
        () => this.textarea.current && autosize(this.textarea.current)
      );
    } else {
      this.textarea.current && autosize(this.textarea.current);
    }

    if (this.textarea.current) {
      this.textarea.current.addEventListener(RESIZED, this.onResize);
    }
  }

Also, the interface is:

    interface RefObject<T> {
        readonly current: T | null;
    }

Any clue how to make it work with a function? Am I missing something?

[Andarist]

This codepen is using react-autosize-textarea and this repository contains react-textarea-autosize 😅

[gperez-10pines]

It is called, I think React guarantees that. But try the textarea. It won’t grow. Then try with 7.1.0 version and it will work. The functionality is the key here. Passing a function, it breaks.

Also, if you compare the files, 7.0.0 was like this, using this.textarea.current:

  componentDidMount() {
    ...
    if (typeof maxRows === "number" || async) {
      ...
      setTimeout(
        () => this.textarea.current && autosize(this.textarea.current)
      );
    } else {
      this.textarea.current && autosize(this.textarea.current);
    }

    if (this.textarea.current) {
      this.textarea.current.addEventListener(RESIZED, this.onResize);
    }
  }

and 7.1.0 is like this:

  componentDidMount() {
    ...
    if (typeof maxRows === "number") {
      this.updateLineHeight();
    }

    if (typeof maxRows === "number" || async) {
      ...
      setTimeout(
        () => this.textarea && autosize(this.textarea)
      );
    } else {
      this.textarea && autosize(this.textarea);
    }

    if (this.textarea) {
      this.textarea.addEventListener(RESIZED, this.onResize);
    }
  }

Meaning, in the the first chunk of code this.textarea.current used to evaluate to undefined, because .current property of a function is undefined.