title: How to focus on Material UI TextField using useRef hooks when a button is clicked?
body: <p>I have a similar problem as <a href="https://stackoverflow.com/questions/52222988/how-to-focus-a-material-ui-textfield-on-button-click">How to focus a Material UI Textfield on button click?</a> but I couldn't solve the problem with the answers provided.</p>
  
  <p>Here's the code. Basically, all of the textfields are disabled. When edit profile button is clicked, it will set the <code>disabled</code> state for account name to <code>false</code> and I would like to focus on that particular field. I'm using the <code>useRef</code> hooks to reference out the field but it didn't work.It would only work if I click the button twice.</p>
  
  <pre><code>import React, { useState, useEffect, useRef } from "react";
  import Avatar from "@material-ui/core/Avatar";
  import Button from "@material-ui/core/Button";
  import CssBaseline from "@material-ui/core/CssBaseline";
  import TextField from "@material-ui/core/TextField";
  import Grid from "@material-ui/core/Grid";
  import PermContactCalendarIcon from "@material-ui/icons/PermContactCalendar";
  import Typography from "@material-ui/core/Typography";
  import { makeStyles } from "@material-ui/core/styles";
  import Container from "@material-ui/core/Container";
  import Paper from "@material-ui/core/Paper";
  
  const useStyles = makeStyles((theme) =&gt; ({
    paper: {
      marginTop: theme.spacing(3),
      padding: theme.spacing(5),
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main,
    },
    form: {
      width: "100%", // Fix IE 11 issue.
      marginTop: theme.spacing(3),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
    fixedHeight: {
      height: 1000,
    },
    button: {
      marginTop: theme.spacing(3),
      marginRight: theme.spacing(3),
    },
  }));
  
  export default function AccountPage({ userdata }) {
    const classes = useStyles();
  
    const [accountName, setAccountName] = useState("");
  
    const [disabled, setDisabled] = useState(true);
    const inputRef = useRef(null);
  
    const handleOnChange = (e) =&gt; {
      if (e.target.name === "accountname") {
        setAccountName(e.target.value);
      }
    };
  
    return (
      &lt;Container component="main"&gt;
        &lt;CssBaseline /&gt;
        &lt;Paper&gt;
          &lt;div className={classes.paper}&gt;
            &lt;Avatar className={classes.avatar}&gt;
              &lt;PermContactCalendarIcon /&gt;
            &lt;/Avatar&gt;
            &lt;Typography component="h1" variant="h5"&gt;
              Account &amp; User Settings
            &lt;/Typography&gt;
            &lt;form className={classes.form} noValidate&gt;
              &lt;Grid
                container
                direction="column"
                justify="center"
                alignItems="stretch"
                spacing={2}
              &gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Typography color="primary" display="inline" noWrap&gt;
                    Account Name :
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;TextField
                    name="accountname"
                    variant="outlined"
                    fullWidth
                    //   autoFocus
                    onChange={handleOnChange}
                    disabled={disabled}
                    value={accountName}
                    inputRef={inputRef}
                  /&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Typography color="primary" display="inline" noWrap&gt;
                    E-mail Address :
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;TextField
                    variant="outlined"
                    fullWidth
                    value={userdata.email}
                    type="email"
                    name="email"
                    disabled={true}
                    //   onChange={handleOnChange}
                  /&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Typography color="primary" display="inline" noWrap&gt;
                    Account ID :
                  &lt;/Typography&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;TextField
                    variant="outlined"
                    fullWidth
                    name="id"
                    value={userdata._id}
                    type="text"
                    disabled={true}
                    //   onChange={handleOnChange}
                  /&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
              &lt;Button
                variant="contained"
                color="primary"
                className={(classes.submit, classes.button)}
                onClick={() =&gt; {
                  setDisabled(false);
                  inputRef.current.focus();
                }}
              &gt;
                Edit Profile
              &lt;/Button&gt;
              &lt;Button
                //   type="submit"
                variant="contained"
                color="primary"
                className={(classes.submit, classes.button)}
                onClick={() =&gt; {
                  setDisabled(true);
                }}
              &gt;
                Save Changes
              &lt;/Button&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/Paper&gt;
      &lt;/Container&gt;
    );
  }
  </code></pre>