Material-ui: [TextField] add ref callback

[jgoux]

Problem description

The TextField component ref's callback returns null instead of the root node of the component.

More globally, it would be great to have this callback on every Material UI's components.

Link to minimal working code that reproduces the issue

https://codesandbox.io/s/kzJWNlX5

Versions

• Material-UI: 1.0.0-alpha.14
• React: 15.5.3
• Browser: Chrome 58 on Windows 10 x64

[oliviertassinari]

This behaviour is explained by the fact that TextField is a stateless functional component. What's the use case for that reference? I think that good rule of thumb is to add a rootRef callback property whenever needed. Also, we could add a inputRef callback property to access the underlying input.

[bnopacheco]

Following the React docs... works for me, but I get warnings.
https://facebook.github.io/react/docs/refs-and-the-dom.html

Is there any advantage in using Ref or onChange methods?

// CustomTextField component
import React, { Component } from 'react'
import TextField from 'material-ui/TextField'

export default (props) => (
    <div>
        <TextField {...props} ref={props.inputRef}  />
    </div>
)

import React, {Component} from 'react'
import CustomTextField as TextField from '../TextField'


class LoginBox extends Component {

    constructor() {
        super()
    }

    send(event) {
        event.preventDefault()
        console.log(this.email.input.value
        console.log(this.password.input.value})
    }

    render() {
        return (

                <div>

                    <form onSubmit={this.send.bind(this)}>
                        <div>
                            <TextField
                                name="email"
                                type="email"
                                inputRef={el => this.email = el}
                            />

                            <TextField
                                name="password"
                                type="password"
                                inputRef={el => this.password = el}}
                            />
                            <input type="submit" value="Send" />

                        </div>
                    </form>
                </div>
        );
    }
}

warning.js?9398f22:36 Warning: Unknown prop inputRef on tag. Remove this prop from the element. For details, see https://fb.me/react-unknown-prop

"material-ui": "^0.18.1",
"react": "^15.5.4",
"react-dom": "^15.5.4"

[jgoux]

@maisumbruno My issue concerns the next branch.
@oliviertassinari I wanted to use it for my Autocomplete component which doesn't work anymore without the ref.

[oliviertassinari]

@jgoux What about?

<TextField
  inputProps={{
    ref: (node) => { console.log('node', node); },
  }}
/>

[oliviertassinari]

Well, that won't work yet. I'm on it.

[oliviertassinari]

I think that exposing a inputRef property would be more appropriate as React is handling ref differently from the other properties. I have been iterating with the previous suggesting, but it's quite tricky.

[Nagle]

@jgoux Which Autocomplete component?

[jgoux]

Thanks for the inputRef addition!

I'm still missing the ref to the root node of TextField. 😄

@Nagle This one : https://codesandbox.io/s/oQ0nkl5pk

[oliviertassinari]

You can try innerRef of withStyles().

[jgoux]

innerRef did the trick! 👍

I'm curious, why adding a new prop like innerRef instead of making the component a class and relying of React's native ref ?

[oliviertassinari]

@jgoux The component is already a class so you can always get a ref.

[jgoux]

I'm not sure I follow.
TextField seems to be a functional component : https://github.com/callemall/material-ui/blob/next/src/TextField/TextField.js#L9

I tried adding a ref callback to it first, but it always return null

[oliviertassinari]

I tried adding a ref callback to it first, but it always return null

Functional components do not support ref callback.

[kushal-tech]

Use can do this by using inputRef
Look at the my answer
https://stackoverflow.com/questions/31446751/how-to-get-password-field-value-in-reacts-material-ui/47329368#47329368

[Girijashankar-CS]

I was needing ref to get the input value , i did the simple trick after passing the ref to material ui text field.

id="required"
ref={"password"}
defaultValue={"password"}
/>;

I used the this to get the value

let sPassword = this.refs.password.input.value;

[aheidelberg]

Not sure if I had the same issue as the original issue but my search for a solution led me here. With RootRef as a wrapper I got the DOM ref I needed.