Bot releases are hidden (Show)

formik -

Published by jaredpalmer almost 5 years ago

Still testing automated releases.

formik -

Published by jaredpalmer almost 5 years ago

Testing out automated releases

formik -

Published by jaredpalmer almost 5 years ago

Patches

Hotfix: Revert throwing combined errors: #2103
Abort submit if instance of real Error: #2104
Remove inline cDU usage in FieldArray: #2114
Remodel FieldArray validation side effect to cDU: #2115

formik -

Published by jaredpalmer almost 5 years ago

Improvements

Massive perf boost over 2.0.6! We now save renders by comparing errors more efficiently in useFormik/Formik.
FastField is now even faster. We fixed up our implementation of shouldComponentUpdate by refactoring the component away from using static contextType and back to using the connect() higher order component.

Bug fixes

Fixed regression where dirty is wasn't re-evaluated after resetForm()
Fixed regression where handleChange would explode when event.target didn't exist (e.g. event.currentTarget

If there are validation errors while calling submitForm(), the promise will now rejects with errors (and of course abort the submit). Previously, it would abort the submit and resolve. The nuance is hard to describe so here is the difference.

Before (2.0.6)

 submitForm() // imagine there are some Yup validation errors
  .then(() => console.log("abort submit, did not call onSubmit, and end up here"))
  .catch(() => console.log("abort submit, did not call onSubmit, but only because of a runtime error"));

After (2.0.7)

 submitForm() // imagine there are some Yup validation errors
  .then(() => console.log("executed onSubmit"))
  .catch((err) => console.log("aborted submit attempt"));

2.0.6: https://codesandbox.io/s/gracious-noether-bu8u6
2.0.7: https://codesandbox.io/s/objective-perlman-jxhuq

Commits

Bump version to 2.0.7 17d82bc
Fix dirty flag when calling resetForm with current values (#1986) ec1d679
Fix no target error (#2024) c5ec709
Fix unnecessary rendering of FastField (#2070) 2b6f71e
Ensure dirty is reevaluated when form is reset (#2087) 39bfbfb
fix FormikHelpers types (#2079) 5c59dbe
Avoid unnecessary re-renders by comparing errors to previous errors (#2069) f4ff028
handle an empty array value argument to setIn (#2072) 9da3288
Throw validation errors from submitForm (#1843) 37870bf
(docs) : update tutorial Final Result code sandbox link (#2055) 4ac6186

https://github.com/jaredpalmer/formik/compare/v2.0.6...v2.0.7

formik -

Published by jaredpalmer almost 5 years ago

Bugfix

Change onSubmit's type signature to accept Promise<any>. This allows folks to return a promise that returns something (which is pretty common). Sorry about that folks.

Commits

Generate 2.0.6 docs e933b9c
Correct 2.0.5 docs 67e9071
Change type signature of onSubmit to accept Promise 2738bbc

https://github.com/jaredpalmer/formik/compare/v2.0.5...v2.0.6

formik -

Published by jaredpalmer almost 5 years ago

Bugfixes

Changed onSubmit behavior to mimic v1 if the function is synchronous. This means fixes a bug where isSubmitting was never toggled. To summarize: If onSubmit is async, then Formik will automatically set isSubmitting to false on your behalf once the submission is completed. This means you do NOT need to call formikBag.setSubmitting(false) manually in v2. HOWEVER, if your onSubmit function is synchronous (e.g. v1), then you need to still call setSubmitting(false) on your own. (#1987)
Fix checkbox bug with null value (#2027)
Update validateFormWithLowPriority with to use fresh values (#2025)

Commits

Generate 2.0.5 website a78bbff
Add docs about v1 onSubmit behavior 430f6cc
Update versions in docs af0c7d0
[tutorial] change id to name for Field example (#2007) d0d7602
Fix code examples in tutorial (#2049) b04a762
Use FormikHelpers instead of FormikActions in the example. (#2001) 8dbaaba
Change isSubmitting behaviour to mimic v1 (#1987) 3ce6551
Fix validation with instances in arrays, follow up to PR #1949 (#2029) c0fe1b9
Fix a few typos in tutorial.md (#2041) e386371
Update tutorial.md (#2043) eb2029d
Update tutorial.md (#2036) d78266f
Update tutorial.md (#2037) 0f54fb8
Update tutorial.md (#2038) aa7fbdb
[ImgBot] Optimize images (#2035) d0b5b07
Add Restaurant365 to users list (#2009) 02c303f
Fix checkbox with null value (#2027) 5916ac0
fix typo: visted -> visited (#2032) 55cbfd3
Call validateFormWithLowPriority with correct values (#2025) 8c08a63
Update tutorial.md (#2030) 28c9242
Update tutorial.md (#2031) 4b52d26
Fixed typo in useField.md. (#2013) 189256d
Fix typo (#2016) 11a4bee
Update README.md 7940fee

https://github.com/jaredpalmer/formik/compare/v2.0.4...v2.0.5

formik -

Published by jaredpalmer almost 5 years ago

Bugfixes

Fix prepareDataForValidation work with instances (#1949) ec7810a. this fixed a regression where people were having issues when keeping wonky objects like Moment() as values.
Fixed scheduler dep.

Internal

Moved docs (and jaredpalmer.com) off of Netlify to Now.sh v2.
Bumped React and TypeScript
Cleaned up migration docs

Commits

Add ts to migration docs (#1995) 5bae8e0
Remove netlify ping (since we moved to zeit) 5553720
Move back docs to their rightful location 343c4ee
Fix now deploys 86b61bb
Add now-build npm task 7fc52e1
Now PR deploys (#1994) 8286190
Setup Zeit for github 82775fa
Added v2 migration note on FormikActions rename to FormikHelpers (#1988) f80d9c6
Fix classname bug (#1975) 76ec8de
Fix unnecessary let usage (#1964) a4ebf84
Update docs a2b66c5
Fix validateOnMount (#1971) d90149e
fixed error in the text (#1970) 56c0a80
Changed from .min() method to max() (#1959) 654b97f
Use placeholder (lowercase) consistently (#1962) e2c2d08
Fix runtime error in useFormikContext example (#1965) e5c8ee1
Update tutorial with missing example / typos (#1966) 3638853
Fix prepareDataForValidation work with instances (#1949) ec7810a
Upgrade docusaurus to 1.14 (#1956) 53585cd
Fix quickstart link (#1955) 1992123
Revert "The link is broken for the quickstart." (#1953) db41f4c
The link is broken for the quickstart. (#1952) 0793638
Chore: Fixes migrating-v2.md Typo (#1944) 94b066c
Fix extraneous tag in docs/tutorial.md (#1946) 8be2e5d
Update codesandbox playground 34e3867
Upgrade React, TS, Scheduler, @types/react (#1939) cbd5681
Fix build command in Codesandbox CI settings (#1943) 5963a8d
Update gzip badge to point to correct URL cd985c8
Replace 2.0.1 on website with 2.0.3 82f61d5
Merge branch 'master' of github.com:jaredpalmer/formik 7882f3d
Fix typo in migration docs 2a56add
Fix typo in migration docs (#1938) 5d3a268

https://github.com/jaredpalmer/formik/compare/v2.0.3...v2.0.4

formik -

Published by jaredpalmer almost 5 years ago

Bugfixes

Fixed TypeScript when using <Form> due to omitted 2nd generic to React.forwardRef. TypeScript users should use this version.

Commits

Update migrating docs to clarify breaking change e72db8a
Update MIGRATING-v2.md (#1937) 8ed4418
Remove unnecessary word (#1936) 428eff2
Add form-specific props to Form component (#1931) e2c9c04
Fix docs bc9bc32
docs: fix bugs in tutorial example code (#1932) 547dbed

https://github.com/jaredpalmer/formik/compare/v2.0.2...v2.0.3

formik -

Published by jaredpalmer almost 5 years ago

Bugfixes

Fixed return TS type of of useField so that it returns a tuple

Commits

Fix tutorial edf4976
Fix field types (#1930) 7b0752a
Update MIGRATING-v2.md 49254b8
Update MIGRATING-v2.md 42cc333
Update MIGRATING-v2.md 0517c8c
Update MIGRATING-v2.md 6b220c0
v2 docs on website (#1923) c16fbc4

https://github.com/jaredpalmer/formik/compare/v2.0.1...v2.0.2

formik -

Published by jaredpalmer almost 5 years ago

Formik 2 Migration Guide

Breaking Changes

Minimum Requirements

Since Formik 2 is built on top of React Hooks, you must be on React 16.8.x or higher
Since Formik 2 uses the unknown type, you must be on TypeScript 3.0 or higher

`resetForm`

There is only one tiny breaking change in Formik 2.x. Luckily, it probably won't impact verry many people. Long story short, because we introduced initialErrors, initialTouched, initialStatus props, resetForm's signature has changed. It now accepts the next initial state of Formik (instead of just the next initial values).

resetForm(nextValues);

resetForm({ values: nextValues /* errors, touched, etc ... */ });

What's New?

Checkboxes and Select multiple

Similarly to Angular, Vue, or Svelte, Formik 2 "fixes" React checkboxes and multi-selects with built-in array binding and boolean behavior. This was one of the most confusing things for people in Formik 1.x.

import React from 'react';
import { Formik, Field, Form } from 'formik';
import { Debug } from './Debug';

const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));

const CheckboxExample = () => (
  <div>
    <h1>Checkboxes</h1>
    <p>
      This example demonstrates how to properly create checkboxes with Formik.
    </p>
    <Formik
      initialValues={{
        isAwesome: false,
        terms: false,
        newsletter: false,
        jobType: ['designer'],
        location: [],
      }}
      onSubmit={async values => {
        await sleep(1000);
        alert(JSON.stringify(values, null, 2));
      }}
    >
      {({ isSubmitting, getFieldProps, handleChange, handleBlur, values }) => (
        <Form>
          {/* 
            This first checkbox will result in a boolean value being stored.
          */}
          <div className="label">Basic Info</div>
          <label>
            <Field type="checkbox" name="isAwesome" />
            Are you awesome?
          </label>
          {/* 
            Multiple checkboxes with the same name attribute, but different
            value attributes will be considered a "checkbox group". Formik will automagically
            bind the checked values to a single array for your benefit. All the add and remove
            logic will be taken care of for you.
          */}
          <div className="label">
            What best describes you? (check all that apply)
          </div>
          <label>
            <Field type="checkbox" name="jobType" value="designer" />
            Designer
          </label>
          <label>
            <Field type="checkbox" name="jobType" value="developer" />
            Developer
          </label>
          <label>
            <Field type="checkbox" name="jobType" value="product" />
            Product Manager
          </label>
          {/*
           You do not _need_ to use <Field>/useField to get this behaviorr, 
           using handleChange, handleBlur, and values works as well. 
          */}
          <label>
            <input
              type="checkbox"
              name="jobType"
              value="founder"
              checked={values.jobType.includes('founder')}
              onChange={handleChange}
              onBlur={handleBlur}
            />
            CEO / Founder
          </label>

          {/* 
           The <select> element will also behave the same way if 
           you pass `multiple` prop to it. 
          */}
          <label htmlFor="location">Where do you work?</label>
          <Field
            component="select"
            id="location"
            name="location"
            multiple={true}
          >
            <option value="NY">New York</option>
            <option value="SF">San Francisco</option>
            <option value="CH">Chicago</option>
            <option value="OTHER">Other</option>
          </Field>
          <label>
            <Field type="checkbox" name="terms" />I accept the terms and
            conditions.
          </label>
          {/* Here's how you can use a checkbox to show / hide another field */}
          {!!values.terms ? (
            <div>
              <label>
                <Field type="checkbox" name="newsletter" />
                Send me the newsletter <em style={{ color: 'rebeccapurple' }}>
                  (This is only shown if terms = true)
                </em>
              </label>
            </div>
          ) : null}
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
          <Debug />
        </Form>
      )}
    </Formik>
  </div>
);

export default CheckboxExample;

`useField()`

Just what you think, it's like <Field>, but with a hook. See docs for usage.

`useFormikContext()`

A hook that is equivalent to connect().

`<Field as>`

<Field/> now accepts a prop called as which will inject onChange, onBlur, value etc. directly through to the component or string. This is useful for folks using Emotion or Styled components as they no longer need to clean up component's render props in a wrapped function.

Misc

FormikContext is now exported
validateOnMount?: boolean = false
initialErrors, initialTouched, initialStatus have been added

// <input className="form-input" placeHolder="Jane"  />
<Field name="firstName" className="form-input" placeholder="Jane" />

// <textarea className="form-textarea"/></textarea>
<Field name="message" as="textarea"  className="form-input"/>

// <select className="my-select"/>
<Field name="colors" as="select" className="my-select">
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</Field>

// with styled-components/emotion
const MyStyledInput = styled.input`
  padding: .5em;
  border: 1px solid #eee;
  /* ... */
`
const MyStyledTextarea = MyStyledInput.withComponent('textarea');

// <input className="czx_123" placeHolder="google.com"  />
<Field name="website" as={MyStyledInput} placeHolder="google.com"/>

// <textarea  placeHolder="Post a message..." rows={5}></textarea>
<Field name="message" as={MyStyledTextArea} placeHolder="Post a message.." rows={4}/>

`getFieldProps(nameOrProps)`

There are two useful additions to FormikProps, getFieldProps and getFieldMeta. These are Kent C. Dodds-esque prop getters that can be useful if you love prop drilling, are not using the context-based API's, or if you are building a custom useField.

export interface FieldInputProps<Value> {
  /** Value of the field */
  value: Value;
  /** Name of the field */
  name: string;
  /** Multiple select? */
  multiple?: boolean;
  /** Is the field checked? */
  checked?: boolean;
  /** Change event handler */
  onChange: FormikHandlers['handleChange'];
  /** Blur event handler */
  onBlur: FormikHandlers['handleBlur'];
}

`getFieldMeta(name)`

Given a name it will return an object:

export interface FieldMetaProps<Value> {
  /** Value of the field */
  value: Value;
  /** Error message of the field */
  error?: string;
  /** Has the field been visited? */
  touched: boolean;
  /** Initial value of the field */
  initialValue?: Value;
  /** Initial touched state of the field */
  initialTouched: boolean;
  /** Initial error message of the field */
  initialError?: string;
}

Deprecation Warnings

All `render` props have been deprecated with a console warning.

For <Field>, <FastField>, <Formik>,<FieldArray>, the render prop has been deprecated with a warning as it will be removed in future versions. Instead, use a child callback function. This deprecation is meant to parallel React Context Consumer's usage.

- <Field name="firstName" render={props => ....} />
+ <Field name="firstName">{props => ... }</Field>

formik -

Published by jaredpalmer almost 5 years ago

Improvements

<Form> uses React.forwardRef now
v1's <FastField /> is back. It's slightly fast now since it uses contextType instead of the connect HoC.
FormikContext is exported

Buggos

Fixed array.splice is not a function errors when using array-like item in FieldArray

Breaking Changes from 2.0.1-rc.14

Deprecate (#1917) 9107225
Undeprecate (#1915) c289eb1
getFieldProps now only returns FieldInputProps instead of [FieldInputProps, FieldMetaProps]. This makes is more useful to folks using it with just useFormik

getFieldMeta(name: string) has been added to formik bag. This lets you get this object back for a given field.


export interface FieldMetaProps<Value> {
 /** Value of the field */
 value: Value;
 /** Error message of the field */
 error?: string;
 /** Has the field been visited? */
 touched: boolean;
 /** Initial value of the field */
 initialValue?: Value;
 /** Initial touched state of the field */
 initialTouched: boolean;
 /** Initial error message of the field */
 initialError?: string;
}

Commits

Update README.md a024117
Add migration guide (#1921) 360db2c
Split out getFieldMeta into its own fn (#1922) 7c151b0
Bring back FastField using contextType (#1916) c93a6d4
Add forward ref to Form (#1920) cb3fbe5
Fix array.splice is not a function errors when using array-li… (#1830) d972008
Bump to tsdx 0.9.x (#1919) 053482a
Adding brightwheel to users list (#1877) cbc19ee
Fixing 60sec broken link (#1918) 5ef1d5a
Deprecate (#1917) 9107225
Undeprecate (#1915) c289eb1

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.14...v2.0.1-rc.15

formik -

Published by jaredpalmer almost 5 years ago

Improvements

validateOnMount?: boolean = false (does what you think it does)
Added CodeSandbox CI for PRs
Validation errors are no longer swallowed
New v2 tutorial
You can now reinitialize touched, errors, and status by changing initialX.

Bug fixes

Fixed useEventCallback()
Added back SSR support

Commits

#1134 fix validationSchema nested object for FieldArray Validat… (#1135) fb3e004
Add validateOnMount (#1913) 4ccb6b2
v2 tutorial (#1831) 92749ed
Activating Open Collective (#1892) 9d22e28
Correct type signature of resetForm, fix initialErrors, touched… (#1908) d72cbbf
Replace deprecated prepublish npm script with prepublishOnly (#1910) 526f7ad
Add config for CodeSandbox CI (#1802) e1f84e9
Recursively validateYupSchema. Fix #1520 (#1740) 25edd71
Stop eating validation errors (#1846) b26aba9
update connect() type signature (#1797) 93647ca
set initial value for ref in useEventCallback() (#1826) 45b7bb9
Allow re-initialize of errors and touched (#1799) 3aaaef3
Add useCallback to setFormikState (#1820) 073ee36
Fix typo in useFormikContext example (#1881) 819c745
Add link to accessibility article (#1885) 5e23096
Fix typos in useFormikContext.md (#1890) 9c1ae03
Fix a few typos (#1852) 1e05f66
iOS UX fix for form submittal (#1844) 14f0455
fix error with onChange for select-multiple (#1848) f6adef5
Improve documentation of setSubmitting. (#1857) 909292d
Create FUNDING.yml eefe964
Update tutorial.md (#1806) 2be1cf0
Release Notes for Latest Version in Docs (#1785) 44afb37
add zauberware.com as formik user (#1710) 26ce764
fix setIn when deep object or array is wrong type (#1774) 0b24613
Update validation.md (#1769) da9da04
Document useFormikContext() (#1764) 3da4858
Fix undefined error in yupToFormErrors. (#1767) 24ac8dd
Kill cached directories 6d8e56d
Use useIsomorphicLayoutEffect (#1766) 2832282

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.13...v2.0.1-rc.14

formik -

Published by jaredpalmer about 5 years ago

Improvements

Field registration has been moved into useField(). This means that you can now pass useField() a field-level validation function.
```
const [field, meta] = useField({ name: 'boop', validate: (value) => ({  /* ... */ }) })
```
Added checkbox and async submit examples to Storybook
Added a security policy to project (see: SECURITY.md)

Bugfixes

Fixed invariant logic around warning when Formik context is undefined
Fixed issue when Calling API too soon will yield error Cannot call an event handler while rendering despite using React.useEffect (#1763)

Internal

Switched from CircleCI to GitHub CI + GitHub Actions

Commits

Fix useEventCallback() (#1763) bd0d599
Switch to GitHub CI (#1758) 6e098e3
Update typescript.md (#1753) 98fe4e3
Bump prettier and run it on docs (#1701) dce8d31
Update Gusto logo (#1705) 0a79500
Add Related section with mention of TSDX (#1709) 5f94646
Merge branch 'master' of github.com:jaredpalmer/formik 33a5815
Fix invariant in useFormikContext (#1720) 4b4f04b
Update typescript.md (#1708) 344b846
Add checkbox and async submit examples to storybook b36725e
Add field-registration to useField (#1699) cd40b87
Docs(Overview): Add yarn add yup (#1687) 217a49e
Sync FieldValidator can return undefined (#1680) c0188b4
Update arrays.md (#1635) c2ee2ff
Docs (Nested Object): Wrap Fields with Form (#1681) c63b1cf
Add 1.5.8 version to website 921ec8d
Create SECURITY.md 1c02f01

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.12...v2.0.1-rc.13

formik -

Published by jaredpalmer over 5 years ago

Security Patch

Updated lodash to patch a vulnerability

Commits

Update lodash and lodash-es 0952fc2
Bump docs version 3111773

https://github.com/jaredpalmer/formik/compare/v1.5.7...v1.5.8

formik -

Published by jaredpalmer over 5 years ago

Security Patch

Updated lodash to patch a vulnerability

lodash
Vulnerable versions: < 4.6.2
Patched version: 4.6.2
Affected versions of lodash are vulnerable to Prototype Pollution. The function defaultsDeep could be tricked into adding or modifying properties of Object.prototype using a constructor payload.

Improvements

New logo and docs site styles

Commits

[ImgBot] Optimize images (#1672) 3b64f41
Update branding (#1671) 6715381
[Security] Update lodash (#1668) aaa4545

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.11...v2.0.1-rc.12

formik -

Published by jaredpalmer over 5 years ago

Improvements

Reverted previous Yup.validateAt behavior in added rc.10 as it caused untenable issues with isValid behavior. (#1654)
Upgraded to TypeScript 3.5.3 (fixing #1631)

Commits

Update TS to 3.5.3 (#1663) d077235
Revert low-pri validation at schema path (#1660) 377c36e
Consolidate types for field validate fn (#1655) 2f28c7a

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.10...v2.0.1-rc.11

formik -

Published by jaredpalmer over 5 years ago

(Maybe) Breaking Change

Schema based low-priority validation (triggered by change/blur) now runs at a given schema path using Yup.schema.validateAt (if possible). This means that Yup will run validation against a single slice of the whole schema if it can do so. This should significantly boost perf on underpowered devices. There may be some edge cases that we need to iron out, but neither I or Jason Quense could come up with ones. Regardless, we'll mark this as a breaking change (even though it probably isn't).

Commits

Make sure that field registry isn't recycled (#1658) ade2dc6
Missing shouldValidate parameter from typings (#1643) 793a58e
fix missing import yup package (#1641) 4e629c9
Run low-pri validation at a given field / path in schema (#1578) 7ba657c

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.8...v2.0.1-rc.10

formik -

Published by jaredpalmer over 5 years ago

Commits

Update typescript to 3.5.2 (#1639) 60f4273
submitForm should not break promise chain (#1637) b42d418
Merge pull request #1638 from sajadtorkamani/patch-1 e1edffd
Fix typo fa53d58
Call preventDefault and stopPropagation in handleReset (#1629) 581421e
Fix types 20da8ca
Call preventDefault and stopProp in handle reset too e0f45a9
Merge pull request #1628 from jaredpalmer/fix/undefined-ctx-warning 69c9332
Fix tests 8deb1d3
Warn when using useFormikContext() without ctx ebd07fe
Warn when using connect without Formik context 46182c6

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.7...v2.0.1-rc.8

formik -

Published by jaredpalmer over 5 years ago

Almost there....

Upgraded tsdx to 0.7.x (our ESM module build is no longer minified)
FormikErrors supports array types
Merged v2 in to master!!!

Commits

Update readme clarifying current status f5298e7
Upgrade tsdx c596ddd
FormikErrors didn't support array type. (#1585) 84aa1e6
Formik v2 (#1626) 67f8369
Merge remote-tracking branch 'origin/master' into next 7c7fdba
Remove v2 docs from docusaurus 07b31e2
Merge branch 'master' into next e0a988e
Move DEV declaration to global.d.ts b4a975b

https://github.com/jaredpalmer/formik/compare/v2.0.1-rc.6...v2.0.1-rc.7

formik -

Published by jaredpalmer over 5 years ago

TypeScript Improvement

Before
Calling resetForm without passing a full state object yielded this TS error:

Type '{ values: { email: string; }; }' is missing the following properties from type 'FormikState<{ email: string; }>': errors, touched, isSubmitting, isValidating, submitCount TS2345

After
No TS error when passing partial state object to resetForm

Commits