TypeError: _fieldRef$current.blur is not a function

Question

I used useRef & ref for a custom FieldInput component that contains <Input> from Native Base.

const fieldRef = useRef();
...
    const handleSubmitForm = (
    values: FormValues,
    helpers: FormikHelpers<FormValues>,
  ) => {
 ....
    fieldRef.current.blur();
    helpers.resetForm();
  };

However, I was getting an error on fieldRef.current that Object is possibly 'undefined'.. So, I changed it like this:

const fieldRef = useRef<any>(null);

fieldRef.current?.blur();

This fixed the inline error but upon submitting the form, I still get this:

Warning: An unhandled error was caught from submitForm() TypeError: _fieldRef$current.blur is not a function

How can I fix this? Any workaround would help. I just want to remove the warning.

codesandbox: https://snack.expo.io/@nhammad/jealous-beef-jerky-fix

Answer 1

Add one more check to the if condition. This should remove the warning.

if (fieldRef && fieldRef.current && fieldRef.current.blur)