Form.Item doesn't show error for array validation onSubmit

[vibegame]

Hello everyone! ✋

I'm using validationSchema for Formik component and using Form.Item to display validation errors.

Code:

const options: any[] = [];

const validationSchema = Yup.object({
  items: Yup.array().min(1)
});

const initialValues = {
  items: []
};

const onSubmit = () => {};

function App() {
  return (
    <Formik validationSchema={validationSchema} initialValues={initialValues} onSubmit={onSubmit}>
      <Form>
        <Form.Item name="items">
          <Select name="items" mode="multiple" options={options} />
        </Form.Item>
        <SubmitButton>Submit</SubmitButton>
      </Form>
    </Formik>
  );
}

How to reproduce Copy and paste the code above. Run the project and click on button Submit.

Actual Result Error is not displayed

Expected Result The error is displayed under Select: "items field must have at least 1 items"

Description Form.Item doesn't show the error, because it sets "touched" to false. It handles "touched" incorrectly when it is an empty array. I researched this problem and understood why this is happening: If the touched field is an empty array, it means that the field is touched. https://github.com/formium/formik/issues/3344#issuecomment-925001220

The Problem The following code incorrectly handles an empty touched array -> Form.Item: 28. If a touched array is empty, then it sets isTouched to false.

Thanks for the answers and help!

[sirkeng]

I also have this problem