Formik validation does not work with Material UI Autocomplete

Question

I want to display the validation error when user clears the selection.

The sandbox link is https://codesandbox.io/p/sandbox/formik-autocomplete-yh3sl7?file=%2Fsrc%2FApp.tsx%3A1%2C1-84%2C1

• When the form initial loads with default value. Clearing the value does not trigger the validation.

• Refresh the page. Click on submit. Clear the default value, form validation triggers

• Refresh the page. Click on submit. Clear the default value, form validation triggers. Again click on submit and after that clearing the value does not trigger the validation.

import "./styles.css";
import { object, string } from "yup";
import { useFormik } from "formik";
import { useState } from "react";
import { Autocomplete, Box, TextField } from "@mui/material";

export default function App() {
  const parentCategory = [
    {
      id: "983868dc-106d-446b-822c-ff03e62099c6",
      name: "Electronics",
    },
    {
      id: "7c7ae7a1-bb3b-4c9d-8da2-91c2bf063875",
      name: "q",
    },
    {
      id: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
      name: "Root",
    },
    {
      id: "28c9bd93-9f22-4753-8d63-3dcc4839eb07",
      name: "s",
    },
    {
      id: "6c4245e1-5cc1-4b07-b718-e47a2e0f33ea",
      name: "Television",
    },
  ];
  let categorySchema = object({
    parentId: string().required("Parent category is required.").nullable(),
  });

  const [formData, setFormData] = useState({
    name: "",
    parentId: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
  });

  const initialCategoryValue = {
    name: "Root",
    id: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
  };

  const formik = useFormik({
    initialValues: formData,
    validationSchema: categorySchema,
    onSubmit: (values) => {
      debugger;
    },
  });

  return (
    <div className="App">
      <form onSubmit={formik.handleSubmit}>
        <Autocomplete
          id="ddParentCategory"
          size="small"
          sx={{ width: 300 }}
          getOptionLabel={(option) => option.name}
          getOptionKey={(option) => option.id}
          options={parentCategory}
          renderInput={(params) => (
            <TextField
              {...params}
              label="Parent Category"
              name="parentId"
              error={formik.touched.parentId && Boolean(formik.errors.parentId)}
              helperText={formik.touched.parentId && formik.errors.parentId}
            />
          )}
          isOptionEqualToValue={(option, value) => option.id === value.id}
          defaultValue={initialCategoryValue}
          onChange={(e, value, reason) => {
            formik.setFieldValue("parentId", value?.id);
            console.log(value?.id);
            console.log(formik.getFieldMeta("parentId"));
          }}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

Answer 1

Check this out, the edited code from your code.

import "./styles.css";
import { object, string } from "yup";
import { useFormik } from "formik";
import { useState } from "react";
import { Autocomplete, Box, TextField } from "@mui/material";

export default function App() {
  const parentCategory = [
    {
      id: "983868dc-106d-446b-822c-ff03e62099c6",
      name: "Electronics",
    },
    {
      id: "7c7ae7a1-bb3b-4c9d-8da2-91c2bf063875",
      name: "q",
    },
    {
      id: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
      name: "Root",
    },
    {
      id: "28c9bd93-9f22-4753-8d63-3dcc4839eb07",
      name: "s",
    },
    {
      id: "6c4245e1-5cc1-4b07-b718-e47a2e0f33ea",
      name: "Television",
    },
  ];
  let categorySchema = object({
    parentId: string().required("Parent category is required.").nullable(),
  });

  const [formData, setFormData] = useState({
    name: "",
    parentId: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
  });

  const initialCategoryValue = {
    name: "Root",
    id: "4066deae-7144-40f1-99ab-cc9cf862eb8a",
  };

  const formik = useFormik({
    initialValues: formData,
    validationSchema: categorySchema,
    onSubmit: (values, helpers) => {
      console.log(values);
      helpers.resetForm();
    },
  });

  return (
    <div className="App">
      <form
        onSubmit={(e) => {
          console.log(Boolean(formik.errors.parentId));
          console.log(formik.errors.parentId);

          formik.handleSubmit(e);
        }}
      >
        <Autocomplete
          id="ddParentCategory"
          size="small"
          sx={{ width: 300 }}
          getOptionLabel={(option) => option.name}
          getOptionKey={(option) => option.id}
          options={parentCategory}
          renderInput={(params) => (
            <TextField
              {...params}
              onBlur={formik.handleBlur}
              label="Parent Category"
              name="parentId"
              error={Boolean(formik.errors.parentId)}
              helperText={formik.errors.parentId}
            />
          )}
          isOptionEqualToValue={(option, value) => option.id === value.id}
          defaultValue={initialCategoryValue}
          onChange={(e, value, reason) => {
            formik.setFieldValue("parentId", value?.id);
            console.log(value?.id);
            console.log(formik.getFieldMeta("parentId"));
          }}
        />
        <input type="submit" value="Submit" />
      </form>
    </div>
  );
}

Answer 2

Error field in Mui's TextField requires a Boolean! Try this, it should work:

    <TextField
      {...params}
      label="Parent Category"
      name="parentId"
      error={Boolean(formik.errors.parentId)}
      helperText={formik.errors.parentId}
    />