Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { useState, useEffect } from 'react';
- import { useFormikContext, FieldMetaProps } from 'formik';
- export function useTouchedHandler(name: string, meta: FieldMetaProps<any>) {
- const { setFieldTouched } = useFormikContext<any>();
- // use meta.touched as the initial value to keep the state,
- // in case this field was unmounted
- const [wasChanged, setWasChanged] = useState(meta.touched);
- // track if it was changed a least *once*
- useEffect(() => {
- if (meta.value !== meta.initialValue) {
- setWasChanged(true);
- }
- }, [meta.value, meta.initialValue]);
- useEffect(() => {
- // formik marks fields as *not* touched, if it was
- // *restored* to the initial value - but we *do* want that
- if (!meta.touched && wasChanged) {
- setFieldTouched(name, true, false);
- // on the other hand there can be cases (on blur) where the field
- // is marked as touched even though the user never entered something
- // - but we *don't* want that
- } else if (meta.touched && !wasChanged) {
- setFieldTouched(name, false, false);
- }
- }, [meta.touched, name, setFieldTouched, wasChanged]);
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement