What is the current way of defining the ref for an innerRef attribute using TypeScript?

[ProteanCode]

❓Question

Currently the innerRef has signature of (instance: any) => void which does not fit any type I can remind of, like FormikProps or FormikHelpers

Before that when I was using the 1.5 version where I could call methods like setFieldTouched on the ref therefore an inner Ref should be of type FormikHelper or at least inherit it. The (instance: any) => void looks broken

[ProteanCode]

Since TypeScript is not really helpful i used as casting.

<Formik innerRef={instance=>{formikRef=instance}} {...otherProps}/>`

This however makes a non-constant formikRef variable

let formikRef = useRef(null) as any;

I do not think this is correct way with 2.x

[johnrom]

We do currently use any. You are free to open a PR to change the innerRef to the signature that I wrote for useRef here: #2222

[ProteanCode]

TypeError: formikRef.setFieldTouched is not a function

[johnrom]

@ProteanCode are you using innerRef? My PR using ref itself is a draft, but you can take the same types I used to implement useRef to open a PR for innerRef which, if accepted, should solve your issue with any.

[pierroberto]

Is there any update on this issue?

[johnrom]

@pierroberto #2325 ??

seems merged to me. define your innerref like:

const myRef = useRef<FormikProps>();

return <Formik innerRef={myRef} {...formikProps} />

if that doesn't work, maybe it hasn't gotten a release?

[pierroberto]

That's correct, I missed that release.
Thank you!

[johnrom]

Closing as it seems like we're all good here. InnerRef can be implemented as described here

[fresonn]

last solution doesn't work

[Rubenvdabeele]

When using typed input:

const myRef = React.useRef<FormikProps<YourFormValueType>>(null);

return <Formik<YourFormValueType>
innerRef={myRef}
{...formikProps}
        />

[1mehdifaraji]

First of all you need to define a type for Formik initial values:

interface FormnameInitialValues {
  destination_city: string;
  cell_phone: string;
}

const initialValues: FormnameInitialValues = {
  cell_phone: "",
  destination_city: "",
};

Then define a form type for the ref state and set your form initial values type to it:

import { FormikProps } from "formik";

const formikRef = useRef<FormikProps<FormnameInitialValues>>(null);

Now you can use all the properties of Formik from the ref state without any typescript errors and also get the benefit of autocomplete.

if (formikRef.current) formikRef.current.resetForm();
if (formikRef.current) formikRef.current.isValid();