[TextField] helperText fixed height

Problem description

I’m a bit confused as to how have a proper error text in a form using TextField (think 'Both password should match").

I tried different approach:

• display the error text in label when there is an error
  • you don’t have a label anymore, it’s a bit confusing
• display the error text in helperText
  • the height change depending if there is an error or not. It’s not great to have clean layout and the form start to move around with each error.
  • setting helperText to an empty string doesn’t fix the height issue.
• force helperText to be a FormHelperText with an error string or not
  • even if it’s not a string, TextField will still wrap it in another FormHelperText which lead to a <p> inside a <p> and a complain by react. This is not the behavior expected when you read the documentation.
• change the margin property
  • none of them gives a stable height in this case.

Any hint ?

Versions

• Material-UI: 1.0.0-beta.4

[MichaelMure]

Ho, actually, using a space for helperText is working. I got confused somehow.

For the next guy, I’m using this finally (for redux-form):

export const renderTextField = ({ input, meta: { touched, error }, ...custom }) => (
  <TextField
    error={touched && (error != null)}
    helperText={(touched && (error != null)) ? error : ' '}
    {...input}
    {...custom}
  />
)

So it’s working, but it still feel a bit awkward to me. Anyway …

[mizanmahi]

In my project I fixed it in this way, blank space is the hack here

<SolrufTextFieldGray
   size='small'
   conText={<InsertLinkIcon />}
    label='Video Intro'
    style={{ marginBottom: '1rem' }}
    {...register('video_url', {
        required: {
            value: true,
             message: 'Video is Required',
        },
    })}
  error={errors.video_url}
  helperText={
    errors.video_url ? errors.video_url.message : ' '
  }
   />