A Guide on Material UI Autocomplete Issue with Default Value in React

I ran into a problem with Material UI’s Autocomplete component. I needed to set up a default value in react that would survive form submission. However, despite my efforts, the default value was never actually recognized by my form. I’d have to click the autocomplete and select it manually every time for the value to be valid. I’ll explain the issue, analyze the code that triggered the error, and walk through some improvements and extra features to practice.

Original Code With Show Error

<Autocomplete
  name="member_status"
  value={values.member_status}
  options={memberStatuses ? memberStatuses : []}
  getOptionLabel={(memberStatus) => memberStatus.name}
  onChange={(e, value) => {
    setFieldValue("member_status", value !== null ? value.id : "");
  }}
  renderInput={(params) => (
    <TextField
      {...params}
      label="Member Status"
      name="member_status"
      variant="outlined"
      onBlur={handleBlur}
      helperText={touched.member_status ? errors.member_status : ""}
      error={touched.member_status && Boolean(errors.member_status)}
    />
  )}
/>

I want to have a default value in my autocomplete field. My form shows the default value as rendered by Material UI, but when I submit, the value appears as if nothing has been selected. The autocomplete is essentially “empty” from the form validation’s standpoint unless I click and reselect an option.

Breaking Down the Code

• Value Prop:
  The component receives its value from values.member_status, which should store the selected member status.
• Options Prop:
  The list of available options is provided by memberStatuses. If memberStatuses is falsy, we fall back to an empty array.
• getOptionLabel:
  This function tells the Autocomplete which property to display, in this case, memberStatus.name.
• onChange Handler:
  When an option is selected, the handler calls setFieldValue to update the form state with the selected member status’s id. If no value is selected, an empty string is assigned.
• renderInput:
  This portion renders the TextField with all necessary props to integrate with form validation (e.g., onBlur, error display, etc.).

The Error

The error occurs because the default value assigned to values.member_status does not trigger the onChange event. Material UI’s Autocomplete relies on this event to update the form state. The default value you see in the UI is not actually “selected” – it is just displayed. So when the form submits, the value remains empty or invalid.

Fixing the Issue and Additional Practice Functionality

To solve the issue, I made sure that the default value is explicitly set in the form state. Here are a few practical improvements:

1. Initialize Form Values:
   Ensure that the initial value of values.member_status is set to a valid option (or at least the id of one), so the Autocomplete has an actual default selection.
2. Display the Correct Default Option:
   Pass the entire object instead of just the id into the Autocomplete’s value if needed. This ensures that when the component renders, it knows which option is selected.
3. Custom onChange Handler:
   If you need to extract additional values on change, you can modify the onChange logic to handle both the id and possibly update another field or state.

Improved Code Sample

Below is an improved version with a couple of practice enhancements, including default value initialization and additional console logging for debug purposes:

React, { useEffect, useState } from 'react';
import { Autocomplete, TextField } from '@mui/material';
import { useFormik } from 'formik';

const memberStatuses = [
  { id: 1, name: 'Active' },
  { id: 2, name: 'Inactive' },
  { id: 3, name: 'Pending' }
];

const MyForm = () => {
  // Initialize the default member_status (selecting the first option as default)
  const initialMemberStatus = memberStatuses[0]; 
  const formik = useFormik({
    initialValues: {
      // Instead of storing just the id, you can store the whole object
      member_status: initialMemberStatus  
    },
    onSubmit: (values) => {
      console.log('Submitted values:', values);
    },
    // You can validate here if necessary
    validate: (values) => {
      const errors = {};
      if (!values.member_status) {
        errors.member_status = 'Required';
      }
      return errors;
    }
  });

  // Debug: Log value changes
  useEffect(() => {
    console.log('Current member status:', formik.values.member_status);
  }, [formik.values.member_status]);

  return (
    <form onSubmit={formik.handleSubmit}>
      <Autocomplete
        name="member_status"
        value={formik.values.member_status}
        options={memberStatuses}
        getOptionLabel={(option) => option.name}
        onChange={(event, newValue) => {
          // Update the whole object so we keep both id and name
          formik.setFieldValue("member_status", newValue);
        }}
        renderInput={(params) => (
          <TextField
            {...params}
            label="Member Status"
            name="member_status"
            variant="outlined"
            onBlur={formik.handleBlur}
            helperText={
              formik.touched.member_status && formik.errors.member_status
                ? formik.errors.member_status
                : ""
            }
            error={
              formik.touched.member_status && Boolean(formik.errors.member_status)
            }
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default MyForm;

What Did I Change

• Initial Value Assignment:
  I set a default value (initialMemberStatus) in the form’s initial values, ensuring the Autocomplete starts with an actual selected value.
• Value Handling:
  Instead of storing just the id, I store the complete object. This allows Material UI’s Autocomplete to correctly display the default selection since it has access to the full option details.
• Enhanced onChange:
  The onChange handler now directly assigns the selected object to the state. This way, if no interaction occurs, the default value is already present and valid for submission.
• Console Logging:
  For practice and debugging, I added a useEffect hook to log current changes in the member status field every time it updates.

Final Thoughts

I learned that when using Material UI’s Autocomplete, a default value must be set directly in the form’s state – not just rendered on the screen. By ensuring the form state includes a valid default object, you avoid submitting an empty or invalid value. I also encouraged more practice by expanding the functionality with debugging logs, more robust default value handling, and a small integration with Formik for better form state management.