How to use forwardRef with withFormik ?

[olignyf]

I want to inject a ref in my formik form. However withFormik obfuscate the forwarding of the reference. This is an excerpt from my code. Anyone knows the right recipe?

interface InternalProps {
  myFunction?: VoidFunction;
}

export interface AccountFormRef {
  myAction: () => void;   // This is what I'm trying to make work
}

const AccountPasswordChangeInnerForm = forwardRef((props:  InternalProps & FormikProps<AccountFormValues>, ref: Ref<AccountFormRef>) => {
  const { t } = useTranslation();
  const { myFunction } = props;

  const myAction = () => {
    console.log("show");
  };
  useImperativeHandle(ref, () => ({ show }));
  
  return (
    <>
     (...)
    </>
   );
});

export const AccountPasswordChangeForm = withFormik<GeneralFormProps, AccountFormValues>({
  enableReinitialize: true, 
  mapPropsToValues: (props) => {
    return {
      name: props.viewModel.name,
      (...)
    };
  },
  validationSchema: accountSchema(),
  handleSubmit: (values, formikBag) => {
    if (!isNil(formikBag.props.onSubmit)) {
      formikBag.props.onSubmit(values);
    }
  },
})(AccountPasswordChangeInnerForm);`

[hushker]

I've faced the same problem and came up with a workaround.
But it could be helpful in the only case if you need this ref to force the form to submit from the outside.
The trick is to inject hidden submit input with forwarded ref:

const SomeForm = ({submitRef, handleSubmit, ...etc}) => {
  return (
    <Form onSubmit={handleSubmit}>
    ...
    <input ref={submitRef} hidden type="submit" />
    ...
    </Form>
    );
}

Then you can force the form to submit with submitRef:

  const submitRef = useRef();
  const submit = () => {
    submitRef.current.click();
  };

return (<SomeForm submitRef={submitRef} .../>)

For other cases bugfix for withFormik is still required.

[nickfreemandesign]

Im not sure I follow this implementation, are you avoiding using withFormik here or omitting for brevity? I'm working on the same challenge and would like to keep the validation constraints from withFormik in place. If you or anyone else has an implementation that shows usage of React.forwardRef, withFormik, and ideally an additional HOC using redux, that would be deeply clarifying.

EDIT: looked into this a little further and responded with another potential solution

[nickfreemandesign]

This is me from the future informing my past self, as well as anyone else who finds this relevant. TLDR drop withFormik and just use the provided Formik component. As of Jan 2020 you can now use the innerRef property as part of the <Formik/> component. Heres a way to do it. I've also added Redux in the mix since it serves as a HOC in between your parent and child components, confuddling the mindspace along the way.

import React, { forwardRef, useRef } from "react"
import { connect } from "react-redux"
import * as Yup from "yup"
import { Formik, Field, Form, ErrorMessage, FormikProps, FormikBag, FormikHelpers } from 'formik';

type FixMe = any // for example purposes only. 

interface FormValues {
    firstName: string
    lastName: string
}

const mapState = ({userProfile}:FixMe) => ({userProfile})
const mapDispatch = {  }
const connectorWithRef = connect(mapState, mapDispatch, null, {forwardRef: true})

const ValidationSchema = Yup.object({
    firstName: Yup.string()
      .max(15, 'Must be 15 characters or less')
      .required('Required'),
    lastName: Yup.string()
      .max(20, 'Must be 20 characters or less')
      .required('Required'),
  })

const ParentContainer = () => {
    const formRef = useRef<FixMe>() // Again, FixMe type is for demonstration purposes. This is a React.MutableRefObject 

    const handleSubmitForm = () => {
        console.log(formRef.current)
        formRef.current.handleSubmit(formRef.current.values)
    }

    return (
        <div>
            <ChildFormikComponent ref={formRef}/>
            <button onClick={handleSubmitForm}>parent button</button>
        </div>
    )
}

const ChildFormikComponent = connectorWithRef(
    forwardRef((props, ref) => {
    return  (
        <Formik
            innerRef={ref as React.MutableRefObject<FormikProps<FormValues>>}
            initialValues={{ firstName: '', lastName: ''}}
            validationSchema={ValidationSchema}
            onSubmit={(values, { setSubmitting }) => {
            setTimeout(() => {
                alert(JSON.stringify(values, null, 2));
                setSubmitting(false);
            }, 400);
            }}>
                <Form style={{display: "flex", flexDirection: "column"}}>
                <label htmlFor="firstName">First Name</label>
                <Field name="firstName" type="text" />
                <ErrorMessage name="firstName" />

                <label htmlFor="lastName">Last Name</label>
                <Field name="lastName" type="text" />
                <ErrorMessage name="lastName" />

                <button hidden type="submit">Submit</button>
                </Form>
            </Formik>
        )
}))

export default ParentContainer

Important takeaways:

• <Formik/> is the ultimate recipient of the ref, and <Formik/> sits inside React.forwardRef, which is "forwarding" the ref to the child component.
• using Redux within the child component means invoking a connector which will map state and dispatch actions. Because the child component is receiving a forwarded ref, we need to add some extra params to tell redux to expect this with: const connectorWithRef = connect(mapState, mapDispatch, null, {forwardRef: true})
• word on the street is you need to use useImperativeHandle when using forwardRef. This example omits this usage, mostly because I am unclear on specifically what it does and don't seem to have any side effects within this little ecosystem provided above. Anyone who understands more on this, your knowledge is welcome.