Material-ui: Add support for React.createRef API

[franklixuefei]

• [x] This is a v1.x issue (v0.x is no longer maintained).
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

No error should be reported after assigning a React.RefObject object to inputRef or ref prop for Input component.

Not only limited to Input.js, I believe we need to update all occurences of refs and inputRefs in the codebase to incorporate the latest ref api.

Current Behavior

TypeError: _this.props.inputRef is not a function

  320 | _this.input = node;
  321 | 
  322 | if (_this.props.inputRef) {
> 323 |   _this.props.inputRef(node);
  324 | } else if (_this.props.inputProps && _this.props.inputProps.ref) {
  325 |   _this.props.inputProps.ref(node);
  326 | }

Context

I updated my code to use the latest React createRef() api.

FYI - this is the React's control flow:

commitAttachRef
node_modules/react-dom/cjs/react-dom.development.js:14343
  14340 |     instanceToUse = instance;
  14341 | }
  14342 | if (typeof ref === 'function') {
> 14343 |   ref(instanceToUse);
  14344 | } else {
  14345 |   {
  14346 |     if (!ref.hasOwnProperty('current')) {

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | v1.2.0 |
| React | 16.4.0 |

[oliviertassinari]

@franklixuefei You are right, we don't support the React.createRef API very well. We gonna need to update the prop types definition and from time to time, the core logic when the ref is proxied.

[t49tran]

I submit a PR targeting inputRef that will solve the problem for TextField, Input and Textarea component specifically. Other components that needs to be worked on will need further scanning and updating.

[franklixuefei]

I think we should reopen this issue because we also need to support the React.createRef() for other components, like FormControlLabel.js, etc...

[oliviertassinari]

@franklixuefei FormControlLabel should support it: https://github.com/mui-org/material-ui/blob/48954b2376929933ec93f77db88da9837a40ffb0/packages/material-ui/src/FormControlLabel/FormControlLabel.js#L119

[franklixuefei]

@oliviertassinari You are right. I did a thorough search in the codebase and I think we are in a pretty good state now regarding the new ref api.

[G-Rath]

Personally, I think it'd be nice if I could just pass the result of React.createRef(), rather than having to have the .current for props like anchorEl (in Popper).

Let me know if you guys are interested, as to if I should create an issue.