TextField: honor error from props

[LoicMahieu]

No description provided.

[coveralls]

Coverage increased (+0.3%) to 91.011% when pulling 59494e2 on LoicMahieu:feature/textfield-error into d26e900 on stackworx:master.

[cliedeman]

Hi Thanks for the PR. can you explain to me a little bit more about your use case? I have documented it properly yet I intentionally exclude some props Omit<MuiTextFieldProps, 'error' | 'name' | 'onChange' | 'value'> {} because I want formik to be the only way to configure some fields so there is no confusion.

Is there any reason you can use setFieldError(name, error)

[LoicMahieu]

Hi @cliedeman
Sorry indeed, it requires a little bit more explanation ;)

The idea is to allow to force the error UI when an error occured outside of the form validation. My example is a graphql query that could be in error:

export const PetBreedSelector = (props: any) => {
  const { data, error, loading } = useQuery<GetPetBreedsType>(GetPetBreeds, {
    variables: {
      type: "DOG",
    },
  });
  const animalBreeds = (data && data.animalBreeds) || []

  const errorProps = {
    error: !!error,
    helperText: error && error.message,
  };

  return (
    <FormikTextField
      {...errorProps}
      {...props}
      select
      InputProps={{ ...(loading && muiTextFieldLoading) }}
    >
      {animalBreeds.map(breed => (
        <MenuItem key={breed.id} value={breed.id}>
          {breed.name}
        </MenuItem>
      ))}
    </FormikTextField>
  );
};

Use setFielderror could be an option but more complicated since it will requires to useEffect or something like that.

[cliedeman]

After some thought I have decided to make this standard.

Please see here for my reasoning

As a workaround you can always use form.setError(fieldName, error);