Adding ErrorText to material-ui Textfield moves other elements

Question

I have a signup form in a React app. I am using material-ui TextField and use the errorText property to add a message if there is an error in the input.

errorText={this.state.messages.emailMessage}

The state.messages.emailMessage is initially set to null and so TextField does not have the extra space for the message when the input is first rendered.

When the message is added it moves the other elements.

How can I allow space for the new node if it is needed so that the other elements are not moved? I tried setting the initial state of the message to ' ' but this colours the input red for error and doesn't work anyway!

Answer 1

You can make them a fixed height by making the helperText equal to an empty space when there is no message to show.

<TextField helperText={error ? error.message : ' '} />

Answer 2

You could just use the errorStyle property setting an absolute position.. That's how I fix those problems in my projects.