How to focus a Material UI Textfield on button click?

Question

How to focus a Textfield after clicking a button. I tried to use autoFocus but it did not work out: Example sandbox

  <div>
    <button onclick={() => this.setState({ focus: true })}>
      Click to focus Textfield
    </button>
    <br />
    <TextField
      label="My Textfield"
      id="mui-theme-provider-input"
      autoFocus={this.state.focus}
    />
  </div>

`autoFocus` is for when it first appears. You can give it a ref and use `.focus()`. You could access it directly via its `id`, though in React a ref is much preferred — Jayce444, Sep 07 '18 at 12:53

rooch84 · Accepted Answer · 2019-01-03T08:43:22.180

You need to use a ref, see https://reactjs.org/docs/refs-and-the-dom.html#adding-a-ref-to-a-dom-element

class CustomTextInput extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
        <div>
          <button onClick={this.focusTextInput}>
            Click to focus Textfield
          </button>
       <br />
       <TextField
         label="My Textfield"
         id="mui-theme-provider-input"
         inputRef={this.textInput} 
       />
     </div>

    );
  }
}

Updated ref to inputRef for Material-UI v3.6.1.

I'm on @material-ui 1.12.3 and needed to use `inputRef` instead of `ref` in the `TextField` props — GraehamF, Jan 02 '19 at 20:37
This doesn't set the border width to the textfield's focused width. When you focus on an input the border width increases from 1px to 2px, but doing this method results in the border width staying at 1px. — Jake, May 14 '19 at 09:45

score 12 · Answer 2 · answered Jun 10 '19 at 06:42

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

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

let MyFunctional = (props) => {

  let textInput = useRef(null);

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

score 1 · Answer 3 · answered Mar 18 '21 at 13:11

If you are using Material-ui <TextField/> with react functional Component, you can implement focus using inputRef. The trick here is the if condition if(input != null). You can simply do:

<TextField
    variant="filled"
    inputRef={(input) => {
      if(input != null) {
         input.focus();
      }
    }}
/>

Here is an working example for you. CodeSandBox- Material-ui-TextFieldFocus

score 0 · Answer 4 · answered Feb 28 '19 at 15:12

First, onclick must be correct like onClick,
then if you want to use it inline your JSX code, it can help.
I tested it with react 16, it works.

 <button onClick={() => this.myTextField.focus()}>
    Click to focus Textfield
 </button>

<TextField
       label="My Textfield"
       id="mui-theme-provider-input"
       inputRef={(el) => (this.myTextField = el)} />

How to focus a Material UI Textfield on button click?

4 Answers4

Linked