Function passed to innerRef is never called

[amsterdamharu]

Using version: 7.0.0

Trying to use it in a functional component:

import React, { useCallback, useState } from 'react';
import TextareaAutosize from 'react-autosize-textarea';

export default function Form() {
  const [val1, setVal1] = useState('1');
  const [val2, setVal2] = useState('2');
  const ref1 = React.createRef();
  //create ref to pass to 2nd input
  const ref2 = React.createRef();
  const change1 = useCallback(
    e => setVal1(e.target.value),
    []
  );
  const change2 = useCallback(
    e => setVal2(e.target.value),
    []
  );
  const focus1 = useCallback(() => ref1.current.focus(), [
    ref1,
  ]);
  const focus2 = useCallback(() => ref2.current.focus(), [
    ref2,
  ]);
  return (
    <div>
      <Input val={val1} onChange={change1} ref={ref1} />
      {/* pass ref2 to input as ref */}
      <Input val={val2} onChange={change2} ref={ref2} />
      <button onClick={focus1}>focus1</button>
      <button onClick={focus2}>focus2</button>
    </div>
  );
}
const Input = React.memo(
  //use forwardRef to pass input ref to parent
  React.forwardRef(function Input({ val, onChange }, ref) {
    console.log('in input render:', val, ref);
    return (
      <TextareaAutosize
        // type="text"
        innerRef={el => {
          console.log('++++++++++ never called');
          ref.current = el;
        }}
        value={val}
        onChange={onChange}
      />
    );
  })
);

The function passed to innerRef is never called but it is rendered.

Full code is here

[giogonzo]

innerRef was an older prop, ref should be used now

closed by #138