setError not working.

[yknevenky]

 <input
        className="hidden"
        type="file"
        multiple
        id="file-upload"
        name="file"
        onChange={fileOnChangeHandler}
      />

<div className="mb-2">
        <ErrorMessage name={name} component={TextError} />
      </div>

const [{  },{touched, value, error} , { setValue, setError, setTouched }] =
    useField<any[]>("fieldName");

  const fileOnChangeHandler = (event: ChangeEvent<HTMLInputElement>) => {
    setTouched(true);
    setError("");
    const files = event.target.files;
    const maxFileSize = 1024 * 1024 ;
    if (!files) {
      return;
    }

    const allowedFiles = Array.from(files).filter(
      (file) => file.size <= maxFileSize
    );

    const rejectedFileNames = Array.from(files).filter(
      (file) => file.size > maxFileSize
    ).map((file) => file.name);
    if (rejectedFileNames.length > 0) {
      const errorMessage = `The following files exceed the allowed file size: ${rejectedFileNames}`;
      setError(errorMessage);
      console.log("Error message",errorMessage);
    } 
    if (allowedFiles) {
      setValue([...value, ...allowedFiles]);
    }
  };

It logs the expected error message but doesn't set it to "error" even though I have called the setError.

[ionizer]

I'm also having similar problem. For some reason it seems like helpers.setError does not set meta.error.

const [field, meta, helpers] = useField('name')
helpers.setError('error')
console.log(meta.error)

I do have a yup validation on this field as well, but it's only something like

{
  name: yup.mixed().required('Please enter name')
}

In this case, console.log(meta.error) logs 'Please enter name'. How can we get the error value set by .setError()?

[ionizer]

Just tried hacking this a bit, but apparently this needed setTimeout to work.

const [field, meta, helpers] = useField('name')
setTimeout(() => {
  helpers.setError('File must be under 1MB') 
  console.log(meta.error)
}, 1000)

In this case meta.error will show 'File must be under 1MB' on the page. Is there a more proper way to do this?

[rwb196884]

Same problem. This workaround makes the error appear sometimes.

  const setErrorHack = (message: string) =>
    setTimeout(() => {
      helper.setError(message);
      console.log(`setErrorHack.meta.error: ${JSON.stringify(meta.error)}`);
    }, 1000);

Actually, setError and setFieldError seem simply to not work.

[rwb196884]

  const [field, meta, helpers] = useField(props.fieldName);
  const formik = useFormikContext();
  const setErrorHack = (message: string) => {
    setTimeout(() => {
      helpers.setError(message);
      helpers.setTouched(true, true);
    }, 1000);
  }

  useEffect(() => {
    console.log(`meta on ${props.fieldName} is ${JSON.stringify(meta)}`);
  }, [meta]);

meta never has an .error.