TextField doesn't support 'ref' ?

[dcsan]

I'm defining a TextField component (within a card) which I pass a ref
but the ref isn't defined ...

<div ref='lessonDetailContainer'>
...
            <TextField
              defaultValue={lessonData.vocab}
              multiLine={true}
              floatingLabelText='vocab'
              ref='lessonVocab'
            />
</div>

How are people making forms with material-ui? Just using the onChange events on every part of the form?

FWIW the TextField is inside a Card/Form
the ref on the wrapper div works fine.

like the very second issue in this repo...
#2

[alitaheri]

I'm working on this as well. The problem is that the ref is passed down to the input. something that doesn't work with React. I'm addressing this in the following PR I'll make.

[dcsan]

OK great, let me know if i can help! when do you expect the PR to land?

[alitaheri]

In 20 minute at most.

[dcsan]

i'm not sure if your PR will address this, but in trying to workaround,
none of the events send info in the parameters either:

            <TextField
              defaultValue={this.data.topic.inherits}
              floatingLabelText='inherits'
              onChange={this.editTopic}
            />

  editTopic(evt, p1, p2, p3) {
    evt.preventDefault();
    Logger.loga(['editTopic', evt, p1, p2, p3], logfile);

with onChange event and onEnterKeyDown property
there are no other values sent apart from the synthetic event.
just p1, p2 etc are undefined. I think this is a regression?

so we can't read via ref, or by using the component methods.
that makes it impossible to use these fields for anything other than display, afai can see?

Is there another workaround to use these text fields for forms, or one event that does send the fields data along?

http://www.material-ui.com/#/components/text-fields

[alitaheri]

It does get passed into that callback, via the first argument evt.target.value. It's a lot messed up, granted. we have to address a lot of issues regarding these components

[schuchowsky]

So the solution for being able to use a ref in the TextField is to use another library? 👎

[lucasbento]

@schuchowsky: this issue is from December 30th, this is working since a long time ago, man.

[schuchowsky]

I'm trying to use a ref on a TextField, to attach an onfocus event on it. On componentDidMount the ref's value is null... Are you sure it is working?

[lucasbento]

@schuchowsky: yes, 2 apps running in production and using a few ref props here and there.

I strongly suggest using https://github.com/mbrookes/formsy-material-ui though, it's an awesome formsy-react wrapper to match Material UI style.

If you are indeed having an issue with ref on <TextField />, please open another issue following the ISSUE_TEMPLATE, commenting on issues from 1 year ago is definitely not gonna help you.

[isuruAb]

@schuchowsky check this, this way it works for me.
http://stackoverflow.com/questions/43960183/material-ui-component-reference-does-not-work

[TeodorKolev]

Not working in 1.0

[sfowl73]

@TeodorKolev It looks like they have an "inputRef" prop in the new textfield https://material-ui.com/api/text-field/

[julianoappelklein]

What worked for me, in this case and others using Material UI components, was to wrap a regular component (i.e. div or span) around my Material UI component.
Once I got the wrapper reference, using the querySelector, I could query for any needed element.

Getting the wrapper reference:

<div
     ref={(div) => { this.textAreaWrapper = div; }}
     style={{ flex:1, marginRight: '7px' }}
>            
     <TextField
               onChange={this.onChange.bind(this)}
               value={this.state.value}
               floatingLabelFixed={true}
               multiLine={multiLine}
               fullWidth={true}
               rowsMax={30}
               underlineShow={true}
               textareaStyle={{minHeight: '80px'}}
               style={{paddingRight, transition:'none', boxSizing:'border-box'}}
               floatingLabelText={field.title} />
</div>

Using it:

fixHeight(){
      if(this.inputWrapper){
            let textArea = this.textAreaWrapper.querySelector('textarea[id]');
            if(textArea){
                let maxHeight = textArea.clientHeight + 48;
                this.setState({maxHeight});
            }
      }
}

Code extracted from my open source CMS for Hugo sites.

[jankalfus]

Wrap your component using RootRef https://material-ui.com/api/root-ref/

[mwaeckerlin]

@jankalfus: How is RootRef supposed to work? It seems to be incompatible with the default React-ref, since, e.g here.:

      <RootRef rootRef={inputs.name}>
        <TextField
          id="name"
          label={t("x")}
          placeholder={t("y")}
        />
      </RootRef>

where inputs.name was initialized as: inputs.name = React.createRef();

inputs.name.current is defined, but input.ref.current.value is undefined!

To be compatible to the react-ref-hook-standard, input.ref.current.value should contain the value of the text field!

• What's wrong?
• Is this a bug?
• What can I do as workaround?

[jankalfus]

@mwaeckerlin
That's because you're trying to access a value of the wrapper div, not the input. See this fiddle for an example: https://jsfiddle.net/8ojwcvyd/
The key part is this: this.myRef.current.querySelector("input").value

[mwaeckerlin]

I found a solution that is compatible with the normal html elements:

https://stackoverflow.com/questions/51310609/unable-to-retrieve-the-input-field-of-material-ui-using-refs-in-react-js/55195196#55195196

[mwaeckerlin]

BTW, @jankalfus, I was looking for hours for a tutorial or example on how to use ref=… in material-ui and only found that nearly undocumented RootRef plus some tickets and some questions in Stack Overflow, but none with a good and working solution.

That means, I was not successful in finding a good comprehensive documentation on how to use React.createRef with material-ui. In any case: Please add some comprehensive documentation on how to properly use ref=… from React.createRef() in material-ui, including access to the value!

What I really want, is to use ref in exactly the same way, as I would use it for a standard <input> element. The solution above is the best I found.

I suggest to make this the default behaviour (so that no explicit onChange is necessary) and to forget about <RootRef>, which seems to me to be a dirty hack only.

[mwaeckerlin]

BTW: I'll use it in conjunction with an addition to Drizzle-React-Components that I am working on.

[gitKendra]

In case anyone comes across this looking for answer like I did, take a look at the recent TextField API documentation (https://material-ui.com/api/text-field/#textfield-api). It has an inputRef property to pass a ref to the input element and access the value like a normal <input>

// Create ref
const myInputRef = React.useRef()

// Get value from input ref
myInputRef.current.value

// Create component that uses the ref
<TextField inputRef={myInputRef} />