Material-ui: TextField doesn't support 'ref' ?

Created on 29 Dec 2015 · 26Comments · Source: mui-org/material-ui

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...
https://github.com/callemall/material-ui/issues/2

Source

dcsan

👍3

Most helpful comment

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.

julianoappelklein on 15 Mar 2018

👍4

All 26 comments

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.

alitaheri on 29 Dec 2015

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

dcsan on 29 Dec 2015

In 20 minute at most.

alitaheri on 29 Dec 2015

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

dcsan on 29 Dec 2015

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

alitaheri on 29 Dec 2015

@dcsan - Just a little plug for https://github.com/mbrookes/formsy-material-ui - even if you don't want to use formsy for form validation, it might help you with ideas for using the components in forms.

mbrookes on 29 Dec 2015

👍1

@mbrookes Good job on your project :+1: :+1: I liked it. might not be bad to open an issue requesting a mention in the README.

alitaheri on 30 Dec 2015

Thanks @alitaheri - maybe a "related projects" section? I'll have a dig around github and see if there are others. I don't think it could be justified for mine alone. :)

mbrookes on 30 Dec 2015

@mbrookes That would be great :+1: :+1: Thanks a lot

alitaheri on 30 Dec 2015

@alitaheri I searched guthub for material-ui sorted by popularity, and while there are lots of Material Design related projects projects that use material-ui in their name, most are not related to material-ui at all. (It says something about this project that it's name is now synonymous with Material Design!). There may well be material-ui related projects that don't use material-ui in their name, but github's search is going to make them hard to find. I tried NPM as well, but nothing further there, If anything pops up in the future we can revisit this.

@dcsan, sorry to hijack your issue!

mbrookes on 30 Dec 2015

@mbrookes Thanks for the effort :+1: :+1: Feel free to open another issue requesting that page. I think is good pattern to promote these related project as they might fulfill some needs our users have. :+1:

alitaheri on 30 Dec 2015

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

schuchowsky on 21 Dec 2016

👍1

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

lucasbento on 21 Dec 2016

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?

schuchowsky on 21 Dec 2016

@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.

lucasbento on 21 Dec 2016

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

isuruAb on 14 May 2017

Not working in 1.0

TeodorKolev on 30 Sep 2017

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

sfowl73 on 24 Jan 2018

👍1

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.

julianoappelklein on 15 Mar 2018

👍4

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

jankalfus on 23 Jan 2019

@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?

mwaeckerlin on 16 Mar 2019

@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

jankalfus on 16 Mar 2019

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 on 16 Mar 2019

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 on 16 Mar 2019

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

mwaeckerlin on 16 Mar 2019

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} />