Focus TextField in material-ui v1

Question

I'm using material-ui v1 in a react app and I am trying to programmatically call .focus() on a TextField. Using the ref property on the TextField returns null so how am I meant to reference the TextField to call .focus() when required?

Answer 1

Updated 2017-09-25: In the new solution, I got rid of ReactDOM... which is way more elegant.

This is how I programmatically set focus on a material-ui TextField (v1-beta16).

import React from 'react';

class MyComponent extends React.Component {
  // you could have similar logic in 'componentDidMount'
  componentWillReceiveProps(newProps) {
    if (..someCondition...) {
      // this is were the focus happens
      this.labelField.focus();    

    }
  }
  render() {
    ...
    <TextField inputRef={field => this.textField = field} .../>
  }
}

---

my previous solution below - DO NOT USE:

This is how I programmatically set focus on a material-ui TextField.

import React from 'react';
import ReactDOM from 'react-dom';

class MyComponent extends React.Component {
  // you could have similar logic in 'componentDidMount'
  componentWillReceiveProps(newProps) {
    if (..someCondition...) {
      // this is were the focus happens
      ReactDOM.findDOMNode(this.labelField).querySelector('input').focus();    

    }
  }
  render() {
    ...
    <TextField ref={field => this.textField = field} .../>
  }
}

Note that I am not satisfied with the solution I am describing here, because it relies on knowing TextField children (querySelector('input')), but mostly because it requires to import ReactDOM.

• Will this make the component harder to test using jest? (didn't try yet...)
• ReactDOM.findDOMNode is considered an "escape hatch [...that is...] discouraged" by facebook.

Answer 2

I think you can make use of refs to achieve this.

Here is the sample code

<input 
      ref={(input) => { this.nameInput = input; }} 
      defaultValue="will focus"
/>

Now making the use of refs you can proceed as below

this.nameInput.focus();

This should solve your problem of setting a focus on input box when some other event is fired.

Answer 3

if you are using a functional component then you can use react hooks.

import React, { useState, useRef } from "react";

let MyStatelessComponent = props => {
  let textInput = useRef(null);

  return (
    <div>
      <Button
        onClick={() => {
          setTimeout(() => {
            textInput.current.focus();
          }, 100);
        }}
      >
        Focus TextField
      </Button>
      <Field
        fullWidth
        required
        inputRef={textInput}
        name="firstName"
        type="text"
        placeholder="Enter Your First Name"
        label="First Name"
        component={TextField}
      />
    </div>
  );
};

Answer 4

if you are using a stateless functional component then you can use react hooks as I have answered here https://stackoverflow.com/a/56521638/1843984