Merge branch 'master' into fix/fastfield-initialvalues-radio-checkbox

jaredpalmer · Nov 7, 2020 · 66e3081 · 66e3081
2 parents c543d8f + 658e785
commit 66e3081
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 23 deletions.
diff --git a/app/pages/sign-in.js b/app/pages/sign-in.js
@@ -1,24 +1,59 @@
-import React from 'react';
-import { ErrorMessage, Field, Form, Formik } from 'formik';
+import React, { useEffect, useState } from 'react';
+import { ErrorMessage, Field, Form, FormikProvider, useFormik } from 'formik';
 import * as Yup from 'yup';
 
-const SignIn = () => (
- <div>
- <h1>Sign In</h1>
-
- <Formik
- validateOnMount={true}
- initialValues={{ username: '', password: '' }}
- validationSchema={Yup.object().shape({
- username: Yup.string().required('Required'),
- password: Yup.string().required('Required'),
- })}
- onSubmit={async values => {
- await new Promise(r => setTimeout(r, 500));
- alert(JSON.stringify(values, null, 2));
- }}
- >
- {formik => (
+const SignIn = () => {
+ const [errorLog, setErrorLog] = useState([]);
+
+ const formik = useFormik({
+ validateOnMount: true,
+ initialValues: { username: '', password: '' },
+ validationSchema: Yup.object().shape({
+ username: Yup.string().required('Required'),
+ password: Yup.string().required('Required'),
+ }),
+ onSubmit: async values => {
+ await new Promise(r => setTimeout(r, 500));
+ alert(JSON.stringify(values, null, 2));
+ },
+ });
+
+ useEffect(() => {
+ if (formik.errors.username && formik.touched.username) {
+ setErrorLog(logs => [
+ ...logs,
+ {
+ name: 'username',
+ value: formik.values.username,
+ error: formik.errors.username,
+ },
+ ]);
+ }
+
+ if (formik.errors.password && formik.touched.password) {
+ setErrorLog(logs => [
+ ...logs,
+ {
+ name: 'password',
+ value: formik.values.password,
+ error: formik.errors.password,
+ },
+ ]);
+ }
+ }, [
+ formik.values.username,
+ formik.errors.username,
+ formik.touched.username,
+ formik.values.password,
+ formik.errors.password,
+ formik.touched.password,
+ ]);
+
+ return (
+ <div>
+ <h1>Sign In</h1>
+
+ <FormikProvider value={formik}>
  <Form>
  <div>
  <Field name="username" placeholder="Username" />
@@ -33,10 +68,12 @@ const SignIn = () => (
  <button type="submit" disabled={!formik.isValid}>
  Submit
  </button>
+
+ <pre id="error-log">{JSON.stringify(errorLog, null, 2)}</pre>
  </Form>
- )}
- </Formik>
- </div>
-);
+ </FormikProvider>
+ </div>
+ );
+};
 
 export default SignIn;
diff --git a/cypress/integration/basic.spec.ts b/cypress/integration/basic.spec.ts
@@ -15,6 +15,24 @@ describe('basic validation', () => {
  cy.get('#renderCounter').contains('0');
  });
 
+ it('should validate show errors on blur', () => {
+ cy.visit('http://localhost:3000/sign-in');
+
+ cy.get('input[name="username"]')
+ .type('john')
+ .blur()
+ .siblings('p')
+ .should('have.length', 0);
+
+ cy.get('input[name="password"]')
+ .type('123')
+ .blur()
+ .siblings('p')
+ .should('have.length', 0);
+
+ cy.get('#error-log').should('have.text', '[]');
+ });
+
  it('should validate autofill', () => {
  // React overrides `input.value` setters, so we have to call
  // native input setter