Merge branch 'master' into release/1.7

jannikbuschke · Jan 7, 2020 · e7f829e · e7f829e
2 parents db757f9 + ee3bd3d
commit e7f829e
Show file tree

Hide file tree

Showing 5 changed files with 127 additions and 18 deletions.
diff --git a/.all-contributorsrc b/.all-contributorsrc
@@ -112,11 +112,21 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "takethefake",
+      "name": "Daniel Schulz",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/3123354?v=4",
+      "profile": "http://schulz.codes",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,
   "projectName": "formik-antd",
   "projectOwner": "jannikbuschke",
   "repoType": "github",
-  "repoHost": "https://github.com"
+  "repoHost": "https://github.com",
+  "skipCi": true
 }
diff --git a/README.md b/README.md
@@ -329,26 +329,30 @@ MIT
 Special thanks to all contributors:
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="https://github.com/NileDaley"><img src="https://avatars3.githubusercontent.com/u/15862011?v=4" width="100px;" alt="Nile Daley"/><br /><sub><b>Nile Daley</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=NileDaley" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.jameswmann.com"><img src="https://avatars2.githubusercontent.com/u/436270?v=4" width="100px;" alt="James W Mann"/><br /><sub><b>James W Mann</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jwmann" title="Code">💻</a></td>
-    <td align="center"><a href="https://www.jannikbuschke.de/blog"><img src="https://avatars2.githubusercontent.com/u/5894881?v=4" width="100px;" alt="Jannik Buschke"/><br /><sub><b>Jannik Buschke</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jannikbuschke" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/LarsJK"><img src="https://avatars2.githubusercontent.com/u/1528255?v=4" width="100px;" alt="Lars-Jørgen Kristiansen"/><br /><sub><b>Lars-Jørgen Kristiansen</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=LarsJK" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/voxtex"><img src="https://avatars3.githubusercontent.com/u/735455?v=4" width="100px;" alt="Adam"/><br /><sub><b>Adam</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=voxtex" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/jeessy2"><img src="https://avatars2.githubusercontent.com/u/6205259?v=4" width="100px;" alt="jeessy2"/><br /><sub><b>jeessy2</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jeessy2" title="Code">💻</a></td>
-    <td align="center"><a href="https://twitter.com/pavan_agrawal_1"><img src="https://avatars3.githubusercontent.com/u/17802917?v=4" width="100px;" alt="Pavan Agrawal"/><br /><sub><b>Pavan Agrawal</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=pavanagrawal123" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/NileDaley"><img src="https://avatars3.githubusercontent.com/u/15862011?v=4" width="100px;" alt=""/><br /><sub><b>Nile Daley</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=NileDaley" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.jameswmann.com"><img src="https://avatars2.githubusercontent.com/u/436270?v=4" width="100px;" alt=""/><br /><sub><b>James W Mann</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jwmann" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.jannikbuschke.de/blog"><img src="https://avatars2.githubusercontent.com/u/5894881?v=4" width="100px;" alt=""/><br /><sub><b>Jannik Buschke</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jannikbuschke" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/LarsJK"><img src="https://avatars2.githubusercontent.com/u/1528255?v=4" width="100px;" alt=""/><br /><sub><b>Lars-Jørgen Kristiansen</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=LarsJK" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/voxtex"><img src="https://avatars3.githubusercontent.com/u/735455?v=4" width="100px;" alt=""/><br /><sub><b>Adam</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=voxtex" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jeessy2"><img src="https://avatars2.githubusercontent.com/u/6205259?v=4" width="100px;" alt=""/><br /><sub><b>jeessy2</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jeessy2" title="Code">💻</a></td>
+    <td align="center"><a href="https://twitter.com/pavan_agrawal_1"><img src="https://avatars3.githubusercontent.com/u/17802917?v=4" width="100px;" alt=""/><br /><sub><b>Pavan Agrawal</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=pavanagrawal123" title="Documentation">📖</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/Khartir"><img src="https://avatars3.githubusercontent.com/u/5592420?v=4" width="100px;" alt="Khartir"/><br /><sub><b>Khartir</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=Khartir" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/yurykozhenov"><img src="https://avatars3.githubusercontent.com/u/18726837?v=4" width="100px;" alt="Yury Kozhenov"/><br /><sub><b>Yury Kozhenov</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=yurykozhenov" title="Code">💻</a></td>
-    <td align="center"><a href="https://ca.linkedin.com/in/jacktonye"><img src="https://avatars2.githubusercontent.com/u/17484350?v=4" width="100px;" alt="Tonye Jack"/><br /><sub><b>Tonye Jack</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jackton1" title="Code">💻</a></td>
-    <td align="center"><a href="http://edongashi.blog"><img src="https://avatars1.githubusercontent.com/u/12145268?v=4" width="100px;" alt="Edon Gashi"/><br /><sub><b>Edon Gashi</b></sub></a><br /><a href="#infra-edongashi" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-    <td align="center"><a href="http://romantsegelskyi.github.io"><img src="https://avatars2.githubusercontent.com/u/3235379?v=4" width="100px;" alt="Roman Tsegelskyi"/><br /><sub><b>Roman Tsegelskyi</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=RomanTsegelskyi" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Khartir"><img src="https://avatars3.githubusercontent.com/u/5592420?v=4" width="100px;" alt=""/><br /><sub><b>Khartir</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=Khartir" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/yurykozhenov"><img src="https://avatars3.githubusercontent.com/u/18726837?v=4" width="100px;" alt=""/><br /><sub><b>Yury Kozhenov</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=yurykozhenov" title="Code">💻</a></td>
+    <td align="center"><a href="https://ca.linkedin.com/in/jacktonye"><img src="https://avatars2.githubusercontent.com/u/17484350?v=4" width="100px;" alt=""/><br /><sub><b>Tonye Jack</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=jackton1" title="Code">💻</a></td>
+    <td align="center"><a href="http://edongashi.blog"><img src="https://avatars1.githubusercontent.com/u/12145268?v=4" width="100px;" alt=""/><br /><sub><b>Edon Gashi</b></sub></a><br /><a href="#infra-edongashi" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
+    <td align="center"><a href="http://romantsegelskyi.github.io"><img src="https://avatars2.githubusercontent.com/u/3235379?v=4" width="100px;" alt=""/><br /><sub><b>Roman Tsegelskyi</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=RomanTsegelskyi" title="Code">💻</a></td>
+    <td align="center"><a href="http://schulz.codes"><img src="https://avatars3.githubusercontent.com/u/3123354?v=4" width="100px;" alt=""/><br /><sub><b>Daniel Schulz</b></sub></a><br /><a href="https://github.com/jannikbuschke/formik-antd/commits?author=takethefake" title="Code">💻</a></td>
   </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "watch": "tsc --watch",
     "cleanbuild": "rm -r node_modules && npm install && tsc",
     "test": "jest",
-    "watch-test":"jest --watch"
+    "watch-test": "jest --watch"
   },
   "dependencies": {},
   "peerDependencies": {

diff --git a/src/form-item/index.test.tsx b/src/form-item/index.test.tsx
@@ -42,6 +42,84 @@ test("displays validation result", async () => {
   expect(queryByText("error")).toBeInTheDocument();
 });
 
+test("displayes initial error", async () => {
+  const { queryByText } = render(
+    <Formik
+      initialErrors={{ test: "initialError" }}
+      initialValues={{}}
+      onSubmit={() => {}}
+    >
+      <Form>
+        <FormItem name="test">
+          <Input name="test" data-testid="input" />
+        </FormItem>
+      </Form>
+    </Formik>
+  );
+  expect(queryByText("initialError")).toBeInTheDocument();
+});
+
+test("displayes error instead of initialError after touched when showInitialErrorAfterTouched is false", async () => {
+  const validate = () => "error";
+  const { getByTestId, queryByText } = render(
+    <Formik
+      initialErrors={{ test: "initialError" }}
+      initialValues={{}}
+      showInitialErrorAfterTouched={false}
+      onSubmit={() => {}}
+    >
+      <Form>
+        <FormItem name="test" validate={validate}>
+          <Input name="test" data-testid="input" />
+        </FormItem>
+        <SubmitButton data-testid="submit" />
+      </Form>
+    </Formik>
+  );
+  expect(queryByText("initialError")).toBeInTheDocument();
+  expect(queryByText("error")).not.toBeInTheDocument();
+  fireEvent.change(getByTestId("input"), {
+    target: { name: "test", value: "test" }
+  });
+  fireEvent.blur(getByTestId("input"));
+  fireEvent.click(getByTestId("submit"));
+  await waitForDomChange();
+  expect(queryByText("error")).toBeInTheDocument();
+  expect(queryByText("initialError")).not.toBeInTheDocument();
+});
+
+test("displayes initialError with error after touched when showInitialErrorAfterTouched is true", async () => {
+  const validate = () => "error";
+  const { getByTestId, queryByText } = render(
+    <Formik
+      initialErrors={{ test: "initialError" }}
+      initialValues={{}}
+      onSubmit={() => {}}
+    >
+      <Form>
+        <FormItem
+          name="test"
+          validate={validate}
+          showInitialErrorAfterTouched={true}
+        >
+          <Input name="test" data-testid="input" />
+        </FormItem>
+        <SubmitButton data-testid="submit" />
+      </Form>
+    </Formik>
+  );
+  expect(queryByText("initialError")).toBeInTheDocument();
+  expect(queryByText("error")).not.toBeInTheDocument();
+  fireEvent.change(getByTestId("input"), {
+    target: { name: "test", value: "test" }
+  });
+  fireEvent.blur(getByTestId("input"));
+  fireEvent.click(getByTestId("submit"));
+  await waitForDomChange();
+  expect(queryByText("error")).toBeInTheDocument();
+  expect(queryByText("initialError")).toBeInTheDocument();
+});
+
 test("handles changes on multiselect without prop-types error", async () => {
   const { getByTestId, queryByText, getByText } = render(
     <Test>

diff --git a/src/form-item/index.tsx b/src/form-item/index.tsx
@@ -4,37 +4,54 @@ import { Form } from "antd";
 import { FormItemProps as $FormItemProps } from "antd/lib/form/FormItem";
 export type FormItemProps = {
   showValidateSuccess?: boolean;
+  showInitialErrorAfterTouched?: boolean;
   children: React.ReactNode;
 } & { name: string } & $FormItemProps &
   Pick<FieldConfig, "validate">;
 
 export const FormItem = ({
   name,
   showValidateSuccess,
+  showInitialErrorAfterTouched = false,
   children,
   validate,
   ...restProps
 }: FormItemProps) => (
   <Field name={name} validate={validate}>
-    {({ form: { errors = {}, touched = {} } }: FieldProps) => {
+    {({
+      form: { errors = {}, touched = {}, initialErrors = {} }
+    }: FieldProps) => {
       const error = getIn(errors, name, undefined);
+      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);
       }
       const hasError = error !== undefined && isTouched;
+      const hasInitialError = initialError !== undefined;
       const isValid = !error && isTouched;
       return (
         <Form.Item
           validateStatus={
-            hasError
+            hasError || (hasInitialError && !isTouched)
               ? "error"
               : isValid && showValidateSuccess
               ? "success"
               : undefined
           }
           hasFeedback={isValid}
-          help={(hasError && <li>{error}</li>) || (isValid && "")}
+          help={
+            (
+              <>
+                {hasError && <li>{error}</li>}
+                {hasInitialError &&
+                  (!isTouched || showInitialErrorAfterTouched) && (
+                    <li>{initialError}</li>
+                  )}
+              </>
+            ) ||
+            (isValid && "")
+          }
           {...restProps}
         >
           {children}