Site icon FSIBLOG

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

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

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

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

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.

Exit mobile version