From 11269b22f20663f475755f2dc18a8f3c6ed30dc2 Mon Sep 17 00:00:00 2001
From: Jannik Buschke <jannik.buschke@gmail.com>
Date: Sun, 28 Nov 2021 20:14:06 +0100
Subject: [PATCH] fix (FormItem): fix multi select error never shown

---
 src/field/index.test.tsx     | 44 ++++++++++++++++++++++++++++++++++++
 src/form-item/index.test.tsx | 28 +++++++++++++++++++++--
 src/form-item/index.tsx      |  5 +++-
 3 files changed, 74 insertions(+), 3 deletions(-)
 create mode 100644 src/field/index.test.tsx

diff --git a/src/field/index.test.tsx b/src/field/index.test.tsx
new file mode 100644
index 0000000..be0c9e4
--- /dev/null
+++ b/src/field/index.test.tsx
@@ -0,0 +1,44 @@
+import '@testing-library/jest-dom/extend-expect'
+import React from 'react'
+import { Formik } from 'formik'
+import { render, fireEvent, waitForDomChange } from '@testing-library/react'
+import Form from '../form/form'
+import Input from '../input'
+import { act } from 'react-dom/test-utils'
+
+const Container = ({ fast }: { fast: boolean }) => {
+  return (
+    <Formik initialValues={{ field: 'initial value' }} onSubmit={() => {}}>
+      <Form>
+        <Input data-testid='uat' name='field' fast={fast} />
+      </Form>
+    </Formik>
+  )
+}
+
+describe('test initial value', () => {
+  it.each`
+    fast
+    ${true}
+    ${false}
+  `('should display initial value (fast=$fast)', async (fast: boolean) => {
+    const { findByTestId } = render(<Container fast={fast} />)
+    expect(await findByTestId('uat')).toHaveValue('initial value')
+  })
+})
+
+describe('should change', () => {
+  it.each`
+    fast
+    ${true}
+    ${false}
+  `('should change (fast=$fast)', async (fast: boolean) => {
+    const { findByTestId } = render(<Container fast={fast} />)
+    const uat = await findByTestId('uat')
+    await act(async () => {
+      fireEvent.change(uat, { target: { value: 'new value' } })
+      await waitForDomChange()
+    })
+    expect(await findByTestId('uat')).toHaveValue('new value')
+  })
+})
diff --git a/src/form-item/index.test.tsx b/src/form-item/index.test.tsx
index a061f93..792999d 100644
--- a/src/form-item/index.test.tsx
+++ b/src/form-item/index.test.tsx
@@ -6,6 +6,7 @@ import {
   fireEvent,
   waitForDomChange,
   wait,
+  waitFor,
   getAllByRole,
 } from '@testing-library/react'
 import FormItem from '.'
@@ -147,7 +148,7 @@ test('should not display help if no display is required', async () => {
 })
 
 test('handles changes on multiselect without prop-types error', async () => {
-  const { getByTestId, queryByText, baseElement, container } = render(
+  const { getByTestId, queryByText, baseElement } = render(
     <Test>
       <Select name='test' data-testid='input' mode='multiple' open={true}>
         <Option value={1}>1</Option>
@@ -162,10 +163,12 @@ test('handles changes on multiselect without prop-types error', async () => {
   await act(async () => {
     fireEvent.click(uat)
   })
+
   // work around type error: cast to any
-  await wait(() => getAllByRole(baseElement as any, 'option'))
+  await waitFor(() => getAllByRole(baseElement as any, 'option'))
   // work around type error: cast to any
   const one = getAllByRole(baseElement as any, 'option')
+
   fireEvent.click(one[0])
 
   expect(console.error).not.toHaveBeenCalled()
@@ -173,6 +176,27 @@ test('handles changes on multiselect without prop-types error', async () => {
   console.error.mockRestore()
 })
 
+test('handles changes on multiselect with array field error', async () => {
+  const validate = () => 'error'
+  const { getByTestId, queryByText } = render(
+    <Formik initialValues={{ test: [] }} onSubmit={() => {}}>
+      <Form>
+        <FormItem name='test' validate={validate}>
+          <Select name='test' data-testid='input' mode='multiple' open={true}>
+            <Option value={1}>1</Option>
+            <Option value={2}>2</Option>
+          </Select>
+        </FormItem>
+        <SubmitButton data-testid='submit' />
+      </Form>
+    </Formik>,
+  )
+  expect(queryByText('error')).not.toBeInTheDocument()
+  fireEvent.click(getByTestId('submit'))
+  await waitForDomChange()
+  expect(queryByText('error')).toBeInTheDocument()
+})
+
 test('displays validation result on nested input', async () => {
   const validate = () => 'error'
   const { getByTestId, queryByText } = render(
diff --git a/src/form-item/index.tsx b/src/form-item/index.tsx
index 32df46e..de2d696 100644
--- a/src/form-item/index.tsx
+++ b/src/form-item/index.tsx
@@ -25,7 +25,10 @@ export const FormItem = ({
       const initialError = getIn(initialErrors, name, undefined)
       let isTouched = getIn(touched, name, false) as boolean | boolean[]
       if (Array.isArray(isTouched)) {
-        isTouched = isTouched.reduce((acc, value) => acc || value, false)
+        isTouched =
+          isTouched.length === 0
+            ? true
+            : isTouched.reduce((acc, value) => acc || value, false)
       }
       const hasError = error !== undefined && isTouched
       const hasInitialError = initialError !== undefined