title: Problem autoFocus Autocomplete Material UI
body: <p>I am not able to <code>focus</code> on the first element of my form which is an Autocomplete component of the Material UI.</p>
  <p>When opening the modal, the focus is on the 'unit' element, as shown in the image below:
  <a href="https://i.stack.imgur.com/GnJeh.png" rel="nofollow noreferrer">It dont's work</a></p>
  <p>I want the focus to be on the 'group' element, as shown below:
  <a href="https://i.stack.imgur.com/6Xm4v.png" rel="nofollow noreferrer">It work</a></p>
  <p>Here is the Sandbox link:
  <a href="https://codesandbox.io/s/awesome-bassi-zjp50?file=/src/MyForm.jsx:1422-1431" rel="nofollow noreferrer">https://codesandbox.io/s/awesome-bassi-zjp50?file=/src/MyForm.jsx:1422-1431</a></p>
  <p>can anyone help me?</p>
  <p><strong>MyForm</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { Formik, Form, Field } from &quot;formik&quot;;
  import * as Yup from &quot;yup&quot;;
  import { Grid } from &quot;@material-ui/core&quot;;
  import Input from &quot;./components/Input&quot;;
  import Autocomplete from &quot;./components/Autocomplete&quot;;
  
  const initialValues = {
    id: 0,
    group: {
      value: 0,
      label: &quot;&quot;
    },
    name: &quot;&quot;,
    unit: {
      value: 0,
      label: &quot;&quot;
    }
  };
  
  const groupList = [
    {
      value: &quot;1&quot;,
      label: &quot;Seeds&quot;
    },
    {
      value: &quot;2&quot;,
      label: &quot;Fertilizers&quot;
    }
  ];
  
  const unitList = [
    {
      value: &quot;1&quot;,
      label: &quot;kg&quot;
    },
    {
      value: &quot;2&quot;,
      label: &quot;t&quot;
    }
  ];
  
  const validationSchema = Yup.object({
    group: Yup.object().shape({
      value: Yup.number().required().min(1).nullable()
    }),
    name: Yup.string().required().max(50),
    unit: Yup.object().shape({
      value: Yup.number().required().min(1).nullable()
    })
  });
  
  export default function MyForm() {
    function _onSubmit(fields, { props, setErrors, setSubmitting }) {
      console.log(fields);
    }
  
    return (
      &lt;Formik
        enableReinitialize={true}
        initialValues={initialValues}
        validationSchema={validationSchema}
        onSubmit={_onSubmit}
      &gt;
        {function Render({ errors, touched, isSubmitting, setFieldValue }) {
          return (
            &lt;Form id=&quot;form&quot;&gt;
              &lt;Grid container direction=&quot;row&quot;&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Field
                    name=&quot;group&quot;
                    autoFocus
                    component={Autocomplete}
                    label=&quot;Group&quot;
                    options={groupList}
                    disabled={isSubmitting}
                    textFieldProps={{
                      fullWidth: true,
                      margin: &quot;dense&quot;,
                      variant: &quot;outlined&quot;
                    }}
                  /&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Field
                    name=&quot;name&quot;
                    fullWidth
                    label=&quot;Name&quot;
                    disabled={isSubmitting}
                    component={Input}
                  /&gt;
                &lt;/Grid&gt;
                &lt;Grid item xs={12}&gt;
                  &lt;Field
                    name=&quot;unit&quot;
                    component={Autocomplete}
                    label=&quot;Unit&quot;
                    options={unitList}
                    disabled={isSubmitting}
                    textFieldProps={{
                      fullWidth: true,
                      margin: &quot;dense&quot;,
                      variant: &quot;outlined&quot;
                    }}
                  /&gt;
                &lt;/Grid&gt;
              &lt;/Grid&gt;
            &lt;/Form&gt;
          );
        }}
      &lt;/Formik&gt;
    );
  }
  </code></pre>
  <p><strong>Popup Modal</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import {
    Dialog,
    DialogTitle,
    DialogContent,
    makeStyles,
    Typography,
    Divider,
    DialogActions,
    Button,
    Grid,
    Box
  } from &quot;@material-ui/core&quot;;
  
  const useStyles = makeStyles((theme) =&gt; ({
    dialogWrapper: {
      padding: theme.spacing(2),
      position: &quot;absolute&quot;,
      top: theme.spacing(5)
    },
    dialogTitle: {
      paddingRight: 0
    },
    button: {
      margin: theme.spacing(0.5),
      textTransform: &quot;none&quot;
    },
    buttonsContainer: {
      display: &quot;flex&quot;,
      flex: &quot;0 0 auto&quot;,
      justifyContent: &quot;flex-end&quot;,
      width: &quot;100%&quot;,
      height: &quot;100%&quot;
    },
    buttons: {
      display: &quot;flex&quot;
    },
    loadingIcon: {
      display: &quot;flex&quot;,
      alignItems: &quot;center&quot;,
      justifyContent: &quot;center&quot;,
      marginRight: theme.spacing(1)
    }
  }));
  
  function Popup(props) {
    const classes = useStyles();
    const { title, children, openPopup, setOpenPopup, ...rest } = props;
  
    return (
      &lt;Dialog
        {...rest}
        open={openPopup}
        maxWidth=&quot;sm&quot;
        classes={{ paper: classes.dialogWrapper }}
      &gt;
        &lt;DialogTitle dividers=&quot;true&quot; className={classes.dialogTitle}&gt;
          &lt;div style={{ display: &quot;flex&quot; }}&gt;
            &lt;Typography variant=&quot;h4&quot; component=&quot;div&quot; style={{ flexGrow: 1 }}&gt;
              {title}
            &lt;/Typography&gt;
          &lt;/div&gt;
        &lt;/DialogTitle&gt;
        &lt;Divider /&gt;
        &lt;DialogContent {...rest} direction=&quot;row&quot;&gt;
          {children}
        &lt;/DialogContent&gt;
        &lt;DialogActions {...rest}&gt;
          &lt;Grid {...rest} container className={classes.buttonsContainer}&gt;
            &lt;Box {...rest} className={classes.buttons}&gt;
              &lt;Button
                className={classes.button}
                variant=&quot;contained&quot;
                color=&quot;primary&quot;
                type=&quot;submit&quot;
                form=&quot;form&quot;
                {...rest}
              &gt;
                Save
              &lt;/Button&gt;
              &lt;Button
                className={classes.button}
                color=&quot;default&quot;
                fullWidth
                onClick={() =&gt; {
                  setOpenPopup(false);
                }}
                {...rest}
              &gt;
                Cancel
              &lt;/Button&gt;
            &lt;/Box&gt;
          &lt;/Grid&gt;
        &lt;/DialogActions&gt;
      &lt;/Dialog&gt;
    );
  }
  
  export default Popup;
  </code></pre>
  <p><strong>Autocomplete</strong></p>
  <pre><code>import React from &quot;react&quot;;
  import { FieldProps, getIn } from &quot;formik&quot;;
  import { TextField, CircularProgress } from &quot;@material-ui/core&quot;;
  import MuiAutocomplete, {
    createFilterOptions
  } from &quot;@material-ui/lab/Autocomplete&quot;;
  
  const NewAutocomplete: React.FC&lt;
    FieldProps &amp; {
      label?: string,
      options: Array&lt;{ label: string, value: number }&gt;
    }
  &gt; = ({ textFieldProps, field, form, label, options, isLoading, ...props }) =&gt; {
    const filterOptions = createFilterOptions({
      matchFrom: &quot;start&quot;,
      limit: 500
    });
    const errorText =
      getIn(form.touched, field.name) &amp;&amp; getIn(form.errors, field.name);
  
    const valueInit = [
      {
        value: 0,
        label: &quot;&quot;
      }
    ];
  
    return (
      &lt;MuiAutocomplete
        {...props}
        {...field}
        filterOptions={filterOptions}
        options={[...valueInit, ...options]}
        getOptionLabel={(option) =&gt; (option ? option.label : &quot;&quot;)}
        getOptionSelected={(option, value) =&gt; option.value === value?.value}
        style={{ width: 300 }}
        loading={isLoading}
        value={field.value}
        onChange={(e, value) =&gt; {
          form.setFieldValue(field.name, value);
        }}
        renderInput={(props) =&gt; (
          &lt;&gt;
            &lt;TextField
              {...props}
              {...textFieldProps}
              label={label}
              helperText={errorText?.value || errorText}
              error={!!errorText}
              autoFocus
              InputProps={{
                ...props.InputProps,
                endAdornment: (
                  &lt;React.Fragment&gt;
                    {isLoading ? (
                      &lt;CircularProgress color=&quot;primary&quot; size={20} /&gt;
                    ) : null}
                    {props.InputProps.endAdornment}
                  &lt;/React.Fragment&gt;
                )
              }}
            /&gt;
          &lt;/&gt;
        )}
      /&gt;
    );
  };
  
  export default NewAutocomplete;
  </code></pre>
  <p>Thanks for your help!</p>