Field height jumps when errors appear because of helperText

[Philipp91]

Same issue as here.

A field without error and warning has no helperText set. In that case, material-ui's will not reserve any space for the helper text. When the field becomes validated and is invalid, the errorText is added and the height of the field increases. This leads to a visible jump in the page layout, which is especially bad if there are many invalid fields, or if it happens often as users click through the fields.

To reproduce in the demo linked from the main page, just focus and unfocus the "Email" field and watch the remainder of the form move down.

Any proper solution will have to reserve this space always, even when no error message is present. This leads to a less dense form. In my opinion/application, the errorText space is just enough to make the form appear nice when there are no errors, i.e. I don't have to code any padding/margin etc. When an error does appear, it comes quite close to the field just below, but I prefer that over the visual jump.

If you're willing to change the default behavior of formik-material-ui, I'm happy to send a PR that implements this fix (similar to this).

[Jsalaz1989]

This doesn't seem to be getting much attention, but yeah, I've wondered about this too. That shifting around of the fields and the form getting longer and shorter isn't great so ideally they would add that small fix you linked to. In the meantime, I'm sure a bunch of people have thought of adding the helperText=' ' prop to the <Field>, but I thought I'd put it out there.

[cliedeman]

I have given this some thought over time and don't think it should be a default. Especially because you will get a lot of extra padding for every form by default.

With helperText reserved

Without

I thought about opening this on the material-ui repo but I think the response will be the same.

For anyone else finding this issue you can do this in userland with something like

import MuiTextField from '@material-ui/core/TextField';
import {fieldToTextField, TextField, TextFieldProps} from 'formik-material-ui';

const HelperTextReserveTextField = (props: TextFieldProps) => (
  <MuiTextField
    {...fieldToTextField({
      ...props,
      helperText: props.helperText ? props.helperText: ' '
    })}
  />
);

[lippyDesign]

looks like helperText is gone from new version and it's not documented. Where did it go?