Try using forwardRef (bypassed commit hooks, sorry!)

jaredpalmer · Jan 17, 2020 · 67ff970 · 67ff970
1 parent 6618dbc
commit 67ff970
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 6 deletions.
diff --git a/packages/formik/src/Formik.tsx b/packages/formik/src/Formik.tsx
@@ -13,6 +13,7 @@ import {
   FieldHelperProps,
   FieldInputProps,
   FormikHelpers,
+  FormikContextType,
 } from './types';
 import {
   isFunction,
@@ -28,6 +29,7 @@ import {
 import { FormikProvider } from './FormikContext';
 import invariant from 'tiny-warning';
 import { LowPriority, unstable_runWithPriority } from 'scheduler';
+import { FormikBag } from './withFormik';
 
 type FormikMessage<Values> =
   | { type: 'SUBMIT_ATTEMPT' }
@@ -994,15 +996,15 @@ export function useFormik<Values extends FormikValues = FormikValues>({
   return ctx;
 }
 
-export function Formik<
+export const Formik = React.forwardRef(<
   Values extends FormikValues = FormikValues,
   ExtraProps = {}
->(props: FormikConfig<Values> & ExtraProps) {
+>(props: FormikConfig<Values> & ExtraProps, ref: React.Ref<FormikContextType<Values>>) => {
   const formikbag = useFormik<Values>(props);
-  const { component, children, render, innerRef } = props;
+  const { component, children, render } = props;
 
   // This allows folks to pass a ref to <Formik />
-  React.useImperativeHandle(innerRef, () => formikbag);
+  React.useImperativeHandle(ref, () => formikbag);
 
   React.useEffect(() => {
     if (__DEV__) {
@@ -1030,7 +1032,10 @@ export function Formik<
         : null}
     </FormikProvider>
   );
-}
+}) as <
+  Values extends FormikValues = FormikValues,
+  ExtraProps = {}
+>(props: FormikConfig<Values> & ExtraProps & React.RefAttributes<FormikContextType<Values>>) => JSX.Element;
 
 function warnAboutMissingIdentifier({
   htmlContent,

diff --git a/packages/formik/test/Formik.test.tsx b/packages/formik/test/Formik.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { render, fireEvent, wait } from 'react-testing-library';
+import { FormikContextType } from '../src/types';
 import * as Yup from 'yup';
 
 import {
@@ -50,7 +51,7 @@ function Form({
 
 const InitialValues = { name: 'jared' };
 
-function renderFormik<V = Values>(props?: Partial<FormikConfig<V>>) {
+function renderFormik<V = Values>(props?: Partial<FormikConfig<V>> & React.RefAttributes<FormikContextType<Values>>) {
   let injected: any;
   const { rerender, ...rest } = render(
     <Formik
@@ -1296,4 +1297,14 @@ describe('<Formik>', () => {
 
     expect(innerRef.current).toEqual(getProps());
   });
+
+  it('exposes formikbag with forwardRef', () => {
+    const ref = React.createRef<FormikContextType<Values>>();
+
+    const { getProps } = renderFormik({ ref });
+
+    ref.current.values.name;
+
+    expect(ref.current).toEqual(getProps());
+  });
 });