From 51502dc28b9f3753d211e0d352dc102e6a8a6420 Mon Sep 17 00:00:00 2001
From: John Rom <john@nimblelight.com>
Date: Thu, 8 Jul 2021 14:34:14 -0400
Subject: [PATCH] Do basic radio / checkbox parsing, and put all the value
 parse logic in one place between field.onChange and Formik.

---
 app/pages/tutorial/basic.js                  |  16 ++
 package.json                                 |   2 +-
 packages/formik/src/Formik.tsx               |  74 ++------
 packages/formik/src/FormikContext.tsx        |   2 -
 packages/formik/src/helpers/field-helpers.ts |  69 ++++++-
 packages/formik/src/hooks/hooks.ts           | 178 +++++++++----------
 packages/formik/src/types.tsx                |   5 +-
 packages/formik/src/utils.ts                 |  26 ++-
 packages/formik/test/withFormik.test.tsx     |   1 -
 9 files changed, 215 insertions(+), 158 deletions(-)

diff --git a/app/pages/tutorial/basic.js b/app/pages/tutorial/basic.js
index aa55c2b07..9d90fde85 100644
--- a/app/pages/tutorial/basic.js
+++ b/app/pages/tutorial/basic.js
@@ -14,6 +14,7 @@ const Basic = () => (
         email: '',
         favorite: '',
         checked: [],
+        checkedNum: [],
         picked: '',
       }}
       validationSchema={Yup.object().shape({
@@ -64,6 +65,21 @@ const Basic = () => (
             Three
           </label>
         </div>
+        <div id="checkbox-group">Numeric Checkbox Group </div>
+        <div role="group" aria-labelledby="checkbox-group">
+          <label>
+            <Field type="checkbox" name="checkedNum" value={1} parse={value => parseInt(value, 10)} />
+            One
+          </label>
+          <label>
+            <Field type="checkbox" name="checkedNum" value={2} parse={value => parseInt(value, 10)} />
+            Two
+          </label>
+          <label>
+            <Field type="checkbox" name="checkedNum" value={3} parse={value => parseInt(value, 10)} />
+            Three
+          </label>
+        </div>
         <div id="my-radio-group">Picked</div>
         <div role="group" aria-labelledby="my-radio-group">
           <label>
diff --git a/package.json b/package.json
index 84398b116..560581c3f 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
   "scripts": {
     "lerna": "lerna",
     "dev": "lerna run start --stream --parallel",
-    "test": "lerna run test --",
+    "test": "lerna run test -- --silent",
     "test:watch": "lerna run test --stream --no-sort -- --watch",
     "test:watchAll": "lerna run test --stream --no-sort -- --watchAll",
     "test:vscode": "lerna run test --stream --no-sort --",
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
index c6b2cc44d..ba3e90e2e 100755
--- a/packages/formik/src/Formik.tsx
+++ b/packages/formik/src/Formik.tsx
@@ -16,6 +16,7 @@ import {
   HandleChangeEventFn,
   HandleChangeFn,
   FormikSharedConfig,
+  InputElements,
 } from './types';
 import {
   isFunction,
@@ -26,7 +27,6 @@ import {
   getActiveElement,
   getIn,
   setNestedObjectValues,
-  isReactNative,
 } from './utils';
 import { FormikProvider } from './FormikContext';
 import invariant from 'tiny-warning';
@@ -36,6 +36,7 @@ import {
 } from './helpers/form-helpers';
 import { useFormikSubscriptions } from './hooks/useFormikSubscriptions';
 import { useEventCallback } from './hooks/useEventCallback';
+import { selectFieldOnChange } from './helpers/field-helpers';
 
 export type FormikMessage<Values> =
   | { type: 'SUBMIT_ATTEMPT' }
@@ -697,37 +698,35 @@ export function useFormik<Values extends FormikValues = FormikValues>(
   );
 
   const executeChange = React.useCallback(
-    (eventOrTextValue: string | React.ChangeEvent<any>, maybePath?: string) => {
+    (eventOrTextValue: string | React.ChangeEvent<React.ElementRef<InputElements>>, maybePath?: string) => {
       // By default, assume that the first argument is a string. This allows us to use
       // handleChange with React Native and React Native Web's onChangeText prop which
       // provides just the value of the input.
       let field = maybePath;
-      let val = eventOrTextValue;
-      let parsed;
+
       // If the first argument is not a string though, it has to be a synthetic React Event (or a fake one),
       // so we handle like we would a normal HTML change event.
       if (!isString(eventOrTextValue)) {
         // If we can, persist the event
         // @see https://reactjs.org/docs/events.html#event-pooling
-        if ((eventOrTextValue as any).persist) {
-          (eventOrTextValue as React.ChangeEvent<any>).persist();
+        //
+        // but first, check if someone might have faked this value
+        if (typeof eventOrTextValue.persist !== "undefined") {
+          eventOrTextValue.persist();
         }
+
         const target = eventOrTextValue.target
-          ? (eventOrTextValue as React.ChangeEvent<any>).target
-          : (eventOrTextValue as React.ChangeEvent<any>).currentTarget;
+          ? eventOrTextValue.target
+          : eventOrTextValue.currentTarget;
 
         const {
-          type,
           name,
           id,
-          value,
-          checked,
           outerHTML,
-          options,
-          multiple,
         } = target;
 
         field = maybePath ? maybePath : name ? name : id;
+
         if (!field && __DEV__) {
           warnAboutMissingIdentifier({
             htmlContent: outerHTML,
@@ -735,21 +734,14 @@ export function useFormik<Values extends FormikValues = FormikValues>(
             handlerName: 'handleChange',
           });
         }
-        val = /number|range/.test(type)
-          ? ((parsed = parseFloat(value)), isNaN(parsed) ? '' : parsed)
-          : /checkbox/.test(type) // checkboxes
-          ? getValueForCheckbox(getIn(getState().values, field!), checked, value)
-          : options && multiple // <select multiple>
-          ? getSelectedValues(options)
-          : value;
-      }
 
-      if (field) {
-        // Set form fields by name
-        setFieldValue(field, val);
+        selectFieldOnChange({ setFieldValue, getState })(eventOrTextValue);
+
+      } else if (field) {
+        selectFieldOnChange({ setFieldValue, getState }, field)(eventOrTextValue);
       }
     },
-    [setFieldValue, getState().values]
+    [setFieldValue]
   );
 
   const handleChange = useEventCallback(
@@ -984,33 +976,6 @@ export function useFormik<Values extends FormikValues = FormikValues>(
     resetForm();
   });
 
-  const getValueFromEvent = useEventCallback(
-    (event: React.SyntheticEvent<any>, fieldName: string) => {
-      // React Native/Expo Web/maybe other render envs
-      if (
-        !isReactNative &&
-        event.nativeEvent &&
-        (event.nativeEvent as any).text !== undefined
-      ) {
-        return (event.nativeEvent as any).text;
-      }
-
-      // React Native
-      if (isReactNative && event.nativeEvent) {
-        return (event.nativeEvent as any).text;
-      }
-
-      const target = event.target ? event.target : event.currentTarget;
-      const { type, value, checked, options, multiple } = target;
-
-      return /checkbox/.test(type) // checkboxes
-        ? getValueForCheckbox(getIn(getState().values, fieldName!), checked, value)
-        : !!multiple // <select multiple>
-        ? getSelectedValues(options)
-        : value;
-    }
-  );
-
   // mostly optimized renders
   return {
       // config
@@ -1042,7 +1007,6 @@ export function useFormik<Values extends FormikValues = FormikValues>(
       validateField,
       unregisterField,
       registerField,
-      getValueFromEvent,
       // state helpers
       getState,
       useState,
@@ -1203,7 +1167,7 @@ function arrayMerge(target: any[], source: any[], options: any): any[] {
 }
 
 /** Return multi select values based on an array of options */
-function getSelectedValues(options: any[]) {
+export function getSelectedValues(options: HTMLOptionsCollection) {
   const result = [];
   if (options) {
     for (let index = 0; index < options.length; index++) {
@@ -1217,7 +1181,7 @@ function getSelectedValues(options: any[]) {
 }
 
 /** Return the next value for a checkbox */
-function getValueForCheckbox(
+export function getValueForCheckbox(
   currentValue: string | any[],
   checked: boolean,
   valueProp: any
diff --git a/packages/formik/src/FormikContext.tsx b/packages/formik/src/FormikContext.tsx
index df37162ec..1471ef6ba 100644
--- a/packages/formik/src/FormikContext.tsx
+++ b/packages/formik/src/FormikContext.tsx
@@ -47,7 +47,6 @@ export const FormikProvider = <Values,>(props: React.PropsWithChildren<FormikPro
     validateField,
     unregisterField,
     registerField,
-    getValueFromEvent,
     // state helpers
     getState,
     useState,
@@ -82,7 +81,6 @@ export const FormikProvider = <Values,>(props: React.PropsWithChildren<FormikPro
       validateField,
       unregisterField,
       registerField,
-      getValueFromEvent,
       getState,
       useState,
     }),
diff --git a/packages/formik/src/helpers/field-helpers.ts b/packages/formik/src/helpers/field-helpers.ts
index 9bdf3698b..6771bffa5 100644
--- a/packages/formik/src/helpers/field-helpers.ts
+++ b/packages/formik/src/helpers/field-helpers.ts
@@ -1,14 +1,14 @@
-import { FormikReducerState } from "../types";
-import { getIn } from "../utils";
+import { FieldHookConfig } from '../Field';
+import { getSelectedValues, getValueForCheckbox } from '../Formik';
+import { FormikApi, FormikReducerState, InputElements } from '../types';
+import { getIn, getValueFromEvent, isInputEvent, isObject } from '../utils';
 
 /**
  * @internal
  *
  * Get FieldMetaProps from state.
  */
-export const selectFieldMetaByName = <
-Values
->(name: string) => (
+export const selectFieldMetaByName = <Values>(name: string) => (
   state: Pick<
     FormikReducerState<Values>,
     | 'values'
@@ -37,3 +37,62 @@ export const numberParseFn = (value: any, _name: string) => {
 
 export const defaultFormatFn = (value: unknown, _name: string) =>
   value === undefined ? '' : value;
+
+export const selectFieldOnChange = <Value, Values>(
+  {
+    setFieldValue,
+    getState,
+  }: Pick<FormikApi<Values>, 'setFieldValue' | 'getState'>,
+  nameOrConfig?: string | FieldHookConfig<Value>
+) => {
+  return (
+    eventOrValue: React.ChangeEvent<React.ElementRef<InputElements>> | unknown
+  ) => {
+    const {
+      type = '',
+      name = '',
+      parse: configParse,
+      multiple,
+    }: FieldHookConfig<Value> = isObject(nameOrConfig)
+      ? nameOrConfig
+      : isInputEvent(eventOrValue) && eventOrValue.target
+      ? (eventOrValue.target as any)
+      : { name: nameOrConfig! };
+
+    if (isInputEvent(eventOrValue)) {
+      if (eventOrValue.persist) {
+        eventOrValue.persist();
+      }
+    }
+
+    const value = isInputEvent(eventOrValue)
+      ? getValueFromEvent(eventOrValue)
+      : eventOrValue;
+
+    const defaultParse = /number|range/.test(type)
+      ? numberParseFn
+      : // radios and checkboxes don't have a default parser
+      // the default parser won't work for grouped fields
+      !/radio|checkbox/.test(type)
+      ? defaultParseFn
+      : undefined;
+
+    const parse = configParse ?? defaultParse;
+    const parsedValue = parse ? parse(value, name) : value;
+
+    setFieldValue(
+      name,
+      /checkbox/.test(type) &&
+        isInputEvent(eventOrValue) &&
+        eventOrValue.target instanceof HTMLInputElement
+        ? getValueForCheckbox(
+            getIn(getState().values, name!),
+            eventOrValue.target.checked,
+            parsedValue
+          )
+        : multiple && isInputEvent(eventOrValue) && eventOrValue.target instanceof HTMLSelectElement // <select multiple>
+          ? getSelectedValues(eventOrValue.target.options)
+          : parsedValue
+    );
+  };
+};
diff --git a/packages/formik/src/hooks/hooks.ts b/packages/formik/src/hooks/hooks.ts
index d7ca6b8d4..1f6efbc05 100644
--- a/packages/formik/src/hooks/hooks.ts
+++ b/packages/formik/src/hooks/hooks.ts
@@ -2,18 +2,17 @@ import { useMemo } from 'react';
 import { useFormikContext } from '../FormikContext';
 import {
   defaultFormatFn,
-  defaultParseFn,
-  numberParseFn,
   selectFieldMetaByName,
+  selectFieldOnChange,
 } from '../helpers/field-helpers';
 import {
   FieldHelperProps,
   FieldInputProps,
   FieldMetaProps,
-  FormikState
+  FormikState,
 } from '../types';
 import { useFormikState } from './useFormikState';
-import { isInputEvent, isObject, isShallowEqual } from '../utils';
+import { isObject, isShallowEqual } from '../utils';
 import { FieldHookConfig } from '../Field';
 
 /**
@@ -22,82 +21,67 @@ import { FieldHookConfig } from '../Field';
  * Pass `FieldMetaProps` from useFieldMeta, so we don't subscribe twice.
  */
 export const useFieldProps = <Val>(
-    nameOrOptions: string | FieldHookConfig<Val>,
-    fieldMeta: FieldMetaProps<Val>
-  ): FieldInputProps<any> => {
+  nameOrOptions: string | FieldHookConfig<Val>,
+  fieldMeta: FieldMetaProps<Val>
+): FieldInputProps<any> => {
+  const {
+    handleChange,
+    handleBlur,
+    setFieldValue,
+    getState,
+  } = useFormikContext();
+  const name = isObject(nameOrOptions) ? nameOrOptions.name : nameOrOptions;
+  const valueState = fieldMeta.value;
+  const touchedState = fieldMeta.touched;
+
+  const field: FieldInputProps<any> = {
+    name,
+    value: valueState,
+    onChange: handleChange,
+    onBlur: handleBlur,
+  };
+
+  if (isObject(nameOrOptions)) {
     const {
-      handleChange,
-      handleBlur,
-      setFieldValue,
-      getValueFromEvent
-    } = useFormikContext();
-    const name = isObject(nameOrOptions) ? nameOrOptions.name : nameOrOptions;
-    const valueState = fieldMeta.value;
-    const touchedState = fieldMeta.touched;
-
-    const field: FieldInputProps<any> = {
-      name,
-      value: valueState,
-      onChange: handleChange,
-      onBlur: handleBlur,
-    };
-
-    if (isObject(nameOrOptions)) {
-      const {
-        type = "text",
-        value: valueProp, // value is special for checkboxes
-        as: is,
-        multiple,
-        parse = /number|range/.test(type) ? numberParseFn : defaultParseFn,
-        format = defaultFormatFn,
-        formatOnBlur = false,
-      } = nameOrOptions;
-
-      if (type === 'checkbox') {
-        if (valueProp === undefined) {
-          field.checked = !!valueState;
-        } else {
-          field.checked = !!(
-            Array.isArray(valueState) && ~valueState.indexOf(valueProp)
-          );
-          field.value = valueProp;
-        }
-      } else if (type === 'radio') {
-        field.checked = valueState === valueProp;
+      type = 'text',
+      value: valueProp, // value is special for checkboxes
+      as: is,
+      multiple,
+      format = defaultFormatFn,
+      formatOnBlur = false,
+    } = nameOrOptions;
+
+    if (type === 'checkbox') {
+      if (valueProp === undefined) {
+        field.checked = !!valueState;
+      } else {
+        field.checked = !!(
+          Array.isArray(valueState) && valueState.includes(valueProp)
+        );
         field.value = valueProp;
-      } else if (is === 'select' && multiple) {
-        field.value = field.value || [];
-        field.multiple = true;
       }
+    } else if (type === 'radio') {
+      field.checked = valueState === valueProp;
+      field.value = valueProp;
+    } else if (is === 'select' && multiple) {
+      field.value = field.value || [];
+      field.multiple = true;
+    }
 
-      if (type !== 'radio' && type !== 'checkbox' && !!format) {
-        if (formatOnBlur === true) {
-          if (touchedState === true) {
-            field.value = format(field.value, field.name);
-          }
-        } else {
+    if (format) {
+      if (formatOnBlur === true) {
+        if (touchedState === true) {
           field.value = format(field.value, field.name);
         }
-      }
-
-      // We incorporate the fact that we know the `name` prop by scoping `onChange`.
-      // In addition, to support `parse` fn, we can't just re-use the OG `handleChange`, but
-      // instead re-implement it's guts.
-      if (type !== 'radio' && type !== 'checkbox') {
-        field.onChange = (eventOrValue: React.ChangeEvent<any> | any) => {
-          if (isInputEvent(eventOrValue)) {
-            if (eventOrValue.persist) {
-              eventOrValue.persist();
-            }
-            setFieldValue(name, parse(getValueFromEvent(eventOrValue, name), field.name));
-          } else {
-            setFieldValue(name, parse(eventOrValue, field.name));
-          }
-        };
+      } else {
+        field.value = format(field.value, field.name);
       }
     }
 
-    return field;
+    field.onChange = selectFieldOnChange({ setFieldValue, getState }, nameOrOptions);
+  }
+
+  return field;
 };
 
 /**
@@ -117,35 +101,48 @@ export const useFieldMeta = <Value>(name: string): FieldMetaProps<Value> => {
  */
 export const useFieldHelpers = (name: string): FieldHelperProps<any> => {
   const { setFieldValue, setFieldTouched, setFieldError } = useFormikContext();
-  return useMemo(() => ({
-    setValue: (value: any, shouldValidate?: boolean) =>
-      setFieldValue(name, value, shouldValidate),
-    setTouched: (value: boolean, shouldValidate?: boolean) =>
-      setFieldTouched(name, value, shouldValidate),
-    setError: (value: any) => setFieldError(name, value),
-  }), [name, setFieldValue, setFieldTouched, setFieldError]);
-}
+  return useMemo(
+    () => ({
+      setValue: (value: any, shouldValidate?: boolean) =>
+        setFieldValue(name, value, shouldValidate),
+      setTouched: (value: boolean, shouldValidate?: boolean) =>
+        setFieldTouched(name, value, shouldValidate),
+      setError: (value: any) => setFieldError(name, value),
+    }),
+    [name, setFieldValue, setFieldTouched, setFieldError]
+  );
+};
 
-const selectInitialValues = <Values>(state: FormikState<Values>) => state.initialValues;
-export const useInitialValues = <Values>() => useFormikContext<Values>().useState(selectInitialValues);
+const selectInitialValues = <Values>(state: FormikState<Values>) =>
+  state.initialValues;
+export const useInitialValues = <Values>() =>
+  useFormikContext<Values>().useState(selectInitialValues);
 
-const selectInitialTouched = <Values>(state: FormikState<Values>) => state.initialTouched;
-export const useInitialTouched = <Values>() => useFormikContext<Values>().useState(selectInitialTouched);
+const selectInitialTouched = <Values>(state: FormikState<Values>) =>
+  state.initialTouched;
+export const useInitialTouched = <Values>() =>
+  useFormikContext<Values>().useState(selectInitialTouched);
 
-const selectInitialErrors = <Values>(state: FormikState<Values>) => state.initialErrors;
-export const useInitialErrors = <Values>() => useFormikContext<Values>().useState(selectInitialErrors);
+const selectInitialErrors = <Values>(state: FormikState<Values>) =>
+  state.initialErrors;
+export const useInitialErrors = <Values>() =>
+  useFormikContext<Values>().useState(selectInitialErrors);
 
 const selectInitialStatus = (state: FormikState<any>) => state.initialStatus;
-export const useInitialStatus = () => useFormikContext().useState(selectInitialStatus);
+export const useInitialStatus = () =>
+  useFormikContext().useState(selectInitialStatus);
 
 const selectValues = <Values>(state: FormikState<Values>) => state.values;
-export const useValues = <Values>() => useFormikContext<Values>().useState(selectValues);
+export const useValues = <Values>() =>
+  useFormikContext<Values>().useState(selectValues);
 
 const selectTouched = <Values>(state: FormikState<Values>) => state.touched;
-export const useTouched = <Values>() => useFormikContext<Values>().useState(selectTouched);
+export const useTouched = <Values>() =>
+  useFormikContext<Values>().useState(selectTouched);
 
 const selectErrors = <Values>(state: FormikState<Values>) => state.errors;
-export const useErrors = <Values>() => useFormikContext<Values>().useState(selectErrors);
+export const useErrors = <Values>() =>
+  useFormikContext<Values>().useState(selectErrors);
 
 const selectStatus = (state: FormikState<any>) => state.status;
 export const useStatus = () => useFormikContext().useState(selectStatus);
@@ -157,4 +154,5 @@ const selectIsValid = (state: FormikState<any>) => state.isValid;
 export const useIsValid = () => useFormikContext().useState(selectIsValid);
 
 const selectIsSubmitting = (state: FormikState<any>) => state.isSubmitting;
-export const useIsSubmitting = () => useFormikContext().useState(selectIsSubmitting);
+export const useIsSubmitting = () =>
+  useFormikContext().useState(selectIsSubmitting);
diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx
index d06fa6a57..df7c6086b 100644
--- a/packages/formik/src/types.tsx
+++ b/packages/formik/src/types.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { Comparer, Selector } from 'use-optimized-selector';
 
+export type InputElements = "input" | "textarea" | "select";
+
 /**
  * Values of fields in the form
  */
@@ -196,7 +198,7 @@ export interface FormikStateHelpers<Values> {
 export type GetValueFromEventFn = (
   event: React.SyntheticEvent<any>,
   fieldName: string
-) => any;
+) => unknown;
 
 export type HandleSubmitFn = (
   e?: React.FormEvent<HTMLFormElement> | undefined
@@ -267,7 +269,6 @@ export type FormikApi<Values extends FormikValues> = FormikHelpers<Values> &
   FormikHandlers & {
     unregisterField: UnregisterFieldFn;
     registerField: RegisterFieldFn;
-    getValueFromEvent: GetValueFromEventFn;
   };
 
 /**
diff --git a/packages/formik/src/utils.ts b/packages/formik/src/utils.ts
index 054e15f9d..688716d2e 100755
--- a/packages/formik/src/utils.ts
+++ b/packages/formik/src/utils.ts
@@ -1,6 +1,7 @@
 import clone from 'lodash/clone';
 import toPath from 'lodash/toPath';
 import * as React from 'react';
+import { InputElements } from './types';
 
 // Assertions
 
@@ -37,8 +38,8 @@ export const isPromise = (value: any): value is PromiseLike<any> =>
   isObject(value) && isFunction((value as PromiseLike<any>).then);
 
 /** @private is the given object/value a type of synthetic event? */
-export const isInputEvent = (value: any): value is React.SyntheticEvent<any> =>
-  value && isObject(value) && isObject((value as React.SyntheticEvent<any>).target);
+export const isInputEvent = (value: any): value is React.SyntheticEvent<React.ElementRef<InputElements>> =>
+  value && isObject(value) && isObject((value as React.SyntheticEvent<React.ElementRef<InputElements>>).target);
 
 /** @private Are we in RN? */
 export const isReactNative =
@@ -195,3 +196,24 @@ export function setNestedObjectValues<T>(
 
   return response;
 }
+
+export const getValueFromEvent = (event: React.SyntheticEvent<any>) => {
+    // React Native/Expo Web/maybe other render envs
+    if (
+      !isReactNative &&
+      event.nativeEvent &&
+      (event.nativeEvent as any).text !== undefined
+    ) {
+      return (event.nativeEvent as any).text;
+    }
+
+    // React Native
+    if (isReactNative && event.nativeEvent) {
+      return (event.nativeEvent as any).text;
+    }
+
+    const target = event.target ? event.target : event.currentTarget;
+    const { value } = target;
+
+    return value;
+  }
\ No newline at end of file
diff --git a/packages/formik/test/withFormik.test.tsx b/packages/formik/test/withFormik.test.tsx
index 792f19b63..839dfcaca 100644
--- a/packages/formik/test/withFormik.test.tsx
+++ b/packages/formik/test/withFormik.test.tsx
@@ -105,7 +105,6 @@ describe('withFormik()', () => {
       submitForm: expect.any(Function),
       touched: {},
       unregisterField: expect.any(Function),
-      getValueFromEvent: expect.any(Function),
       validateField: expect.any(Function),
       validateForm: expect.any(Function),
       validateOnBlur: true,