Material-ui: Invalid property validation for buttonRef when using new React.createRef

[xaviergonz]

When I do

class MyC extends React.Component {
  this.someRef = React.createRef<HTMLButtonElement>();
  render() {
    return (
      <IconButton buttonRef={this.someRef} />
    );
  }
}

it works but the following warning is issued

Warning: Failed prop type: Invalid prop `buttonRef` of type `object` supplied to `ButtonBase`, expected `function`.
    in ButtonBase (created by WithStyles(ButtonBase))

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No warning should be issued

Current Behavior

A warning is issued

Steps to Reproduce (for bugs)

See above

Context

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | latest |
| React | 16.3 |
| browser | Chrome 66 |
| etc | TS 2.8.3 |

[oliviertassinari]

We need to apply the same fix as with #11293.

[t49tran]

Hi @oliviertassinari , when I come across this problem, I also think we have similar issue with inputRef across multiple component that use Input component as the base. It's not only a type problem but also an issue with the current way ref is handled. Basically, when passing ref created by createRef to an Input component:

this.ref = React.createRef();
 <Input
     inputRef={this.ref}
     defaultValue="Hello world"
     className={classes.input}
     inputProps={{
        'aria-label': 'Description',
     }}
/>

An error will be thrown as our current approach is for callback ref only:

let inputProps = {
      ...inputPropsProp,
      ref: this.handleRefInput,
    };

handleRefInput = node => {
    this.input = node;

    if (this.props.inputRef) {
      this.props.inputRef(node);
    } else if (this.props.inputProps && this.props.inputProps.ref) {
      this.props.inputProps.ref(node);
    }
  };

A quick fix can be do type check to check if this.props.inputRef is a function:

let inputProps = {
      ...inputPropsProp,
      ref: typeof this.props.inputRef === 'function' ? this.handleRefInput : this.props.inputRef,
    };

However, I am not sure what is the plan to support React.createRef. Are we going to support both React.createRef and callback ref in the mean time, or we will drop support for callback ref soon ?

[oliviertassinari]

or we will drop support for callback ref soon

@t49tran Why should we drop such support? As far as I know, it's still the encouraged pattern to get a reference.

[t49tran]

I don't think we should drop it either, it would be a breaking change that affect so many. Just want to know what is the approach you want to take for this problem. So I assume that we will support both in the mean time.