How to focus a Material UI Textfield on button click? - reactjs

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>

Answer 1

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.

Answer 2

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>
);
};

Answer 3

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

Answer 4

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