From 1752de68d7d182b530491533e95ce50e5a0c81a8 Mon Sep 17 00:00:00 2001 From: Ashutosh Date: Tue, 14 May 2024 17:30:31 +0530 Subject: [PATCH] fix(3942): added support for NativeSyntheticEvent --- docs/api/formik.md | 8 ++++---- docs/api/useField.md | 8 ++++---- packages/formik/src/Formik.tsx | 19 +++++++++++++------ packages/formik/src/types.tsx | 20 +++++++++++--------- 4 files changed, 32 insertions(+), 23 deletions(-) diff --git a/docs/api/formik.md b/docs/api/formik.md index 09c0c159b..6bb67efac 100644 --- a/docs/api/formik.md +++ b/docs/api/formik.md @@ -74,24 +74,24 @@ keys and shape will match your schema exactly. Internally, Formik transforms raw on your behalf. If you are using `validate`, then that function will determine the `errors` objects shape. -#### `handleBlur: (e: any) => void` +#### `handleBlur: (e: React.FocusEvent | NativeSyntheticEvent | any) => void` `onBlur` event handler. Useful for when you need to track whether an input has been `touched` or not. This should be passed to `` -#### `handleChange: (e: React.ChangeEvent) => void` +#### `handleChange: (e: React.ChangeEvent | NativeSyntheticEvent) => void` General input change event handler. This will update the `values[key]` where `key` is the event-emitting input's `name` attribute. If the `name` attribute is not present, `handleChange` will look for an input's `id` attribute. Note: "input" here means all HTML inputs. -#### `handleReset: () => void` +#### `handleReset: (e?: React.SyntheticEvent | NativeSyntheticEvent) => void` Reset handler. Will reset the form to its initial state. This should be passed to `` -#### `handleSubmit: (e: React.FormEvent) => void` +#### `handleSubmit: (e?: React.FormEvent | NativeSyntheticEvent) => void` Submit handler. This should be passed to `
...
`. To learn more about the submission process, see [Form Submission](../guides/form-submission.md). diff --git a/docs/api/useField.md b/docs/api/useField.md index e5e3dd6aa..58d18b6eb 100644 --- a/docs/api/useField.md +++ b/docs/api/useField.md @@ -139,8 +139,8 @@ An object that contains: - `name: string` - The name of the field - `checked?: boolean` - Whether or not the input is checked, this is _only_ defined if `useField` is passed an object with a `name`, `type: 'checkbox'` or `type: 'radio'`. -- `onBlur: () => void` - A blur event handler -- `onChange: (e: React.ChangeEvent) => void` - A change event handler +- `onBlur: (e: React.FocusEvent | NativeSyntheticEvent) => void` - A blur event handler +- `onChange: (e: NativeSyntheticEvent | React.ChangeEvent) => void` - A change event handler - `value: Value` - The field's value (plucked out of `values`) or, if it is a checkbox or radio input, then potentially the `value` passed into `useField`. - `multiple?: boolean` - Whether or not the multiple values can be selected. This is only ever defined when `useField` is passed an object with `multiple: true` @@ -160,9 +160,9 @@ An object that contains relevant computed metadata about a field. More specifica An object that contains helper functions which you can use to imperatively change the value, error value or touched status for the field in question. This is useful for components which need to change a field's status directly, without triggering change or blur events. - `setValue(value: any, shouldValidate?: boolean): Promise` - A function to change the field's value. Calling this will trigger validation to run if `validateOnChange` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. -If `validateOnChange` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + If `validateOnChange` is set to `true` and there are errors, they will be resolved in the returned `Promise`. - `setTouched(value: boolean, shouldValidate?: boolean): void` - A function to change the field's touched status. Calling this will trigger validation to run if `validateOnBlur` is set to `true` (which it is by default). You can also explicitly prevent/skip validation by passing a second argument as `false`. -If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`. + If `validateOnBlur` is set to `true` and there are errors, they will be resolved in the returned `Promise`. - `setError(value: any): void` - A function to change the field's error value diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx index b89413142..632f59d2b 100755 --- a/packages/formik/src/Formik.tsx +++ b/packages/formik/src/Formik.tsx @@ -2,6 +2,7 @@ import deepmerge from 'deepmerge'; import isPlainObject from 'lodash/isPlainObject'; import cloneDeep from 'lodash/cloneDeep'; import * as React from 'react'; +import { NativeSyntheticEvent } from 'react-native' import isEqual from 'react-fast-compare'; import invariant from 'tiny-warning'; import { FieldConfig } from './Field'; @@ -604,7 +605,13 @@ export function useFormik({ ); const executeChange = React.useCallback( - (eventOrTextValue: string | React.ChangeEvent, maybePath?: string) => { + ( + eventOrTextValue: + | string + | React.ChangeEvent + | NativeSyntheticEvent, + 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. @@ -620,8 +627,8 @@ export function useFormik({ (eventOrTextValue as React.ChangeEvent).persist(); } const target = eventOrTextValue.target - ? (eventOrTextValue as React.ChangeEvent).target - : (eventOrTextValue as React.ChangeEvent).currentTarget; + ? (eventOrTextValue as React.ChangeEvent | NativeSyntheticEvent).target + : (eventOrTextValue as React.ChangeEvent | NativeSyntheticEvent).currentTarget; const { type, @@ -661,8 +668,8 @@ export function useFormik({ const handleChange = useEventCallback( ( - eventOrPath: string | React.ChangeEvent - ): void | ((eventOrTextValue: string | React.ChangeEvent) => void) => { + eventOrPath: string | React.ChangeEvent | NativeSyntheticEvent + ): void | ((eventOrTextValue: string | React.ChangeEvent | NativeSyntheticEvent) => void) => { if (isString(eventOrPath)) { return event => executeChange(event, eventOrPath); } else { @@ -808,7 +815,7 @@ export function useFormik({ }); const handleSubmit = useEventCallback( - (e?: React.FormEvent) => { + (e?: React.FormEvent | NativeSyntheticEvent) => { if (e && e.preventDefault && isFunction(e.preventDefault)) { e.preventDefault(); } diff --git a/packages/formik/src/types.tsx b/packages/formik/src/types.tsx index 71db6792c..dc051e862 100644 --- a/packages/formik/src/types.tsx +++ b/packages/formik/src/types.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { NativeSyntheticEvent } from 'react-native'; import { FieldConfig } from './Field'; /** * Values of fields in the form @@ -125,29 +126,30 @@ export interface FormikHelpers { /** * Formik form event handlers + * import { NativeSyntheticEvent } from 'react-native'; */ export interface FormikHandlers { /** Form submit handler */ - handleSubmit: (e?: React.FormEvent) => void; + handleSubmit: (e?: React.FormEvent | NativeSyntheticEvent) => void; /** Reset form event handler */ - handleReset: (e?: React.SyntheticEvent) => void; + handleReset: (e?: React.SyntheticEvent | NativeSyntheticEvent) => void; handleBlur: { /** Classic React blur handler, keyed by input name */ - (e: React.FocusEvent): void; + (e: React.FocusEvent | NativeSyntheticEvent): void; /** Preact-like linkState. Will return a handleBlur function. */ - (fieldOrEvent: T): T extends string - ? (e: any) => void + | any>(fieldOrEvent: T): T extends string + ? (e: NativeSyntheticEvent | any) => void : void; }; handleChange: { /** Classic React change handler, keyed by input name */ - (e: React.ChangeEvent): void; + (e: React.ChangeEvent | NativeSyntheticEvent): void; /** Preact-like linkState. Will return a handleChange function. */ - >( + | React.ChangeEvent>( field: T - ): T extends React.ChangeEvent + ): T extends React.ChangeEvent | NativeSyntheticEvent ? void - : (e: string | React.ChangeEvent) => void; + : (e: string | React.ChangeEvent | NativeSyntheticEvent) => void; }; getFieldProps: (