Formik: ErrorMessage render control option for non-empty rendering ability.

[browniefed]

Current Behavior

Currently it will only render when touched and an error exists.

Desired Behavior

Would like a way to render an optional component when not-touched and or no-error so I can render an error placeholder. This allows me to not have forms that jump when the error appears/disappears.

Suggested Solution

emptyComponent prop? ( I don't like it).

truthy/falsy prop that controls render? Defaults to !!touched && !!error

Who does this impact? Who is this for?

All users. All users.

Describe alternatives you've considered

Creating my own error message component.

Additional context

I don't like my forms jumping

[Saifadin]

Don't use <ErrorMessage /> for this behaviour. Write your own component, that holds the error message.
If touched && error does not apply, give it an opacity instead of hiding it.

...
<CustomErrorMessage show={touched && error.email}>
  My email error.
</CustomErrorMessage>
...

And then in favorite css tool/library or whatever do this:

.show {
  opacity: 1;
}
.hide {
  opacity: 0;
}

[browniefed]

Yeah I'm fine with writing my own, would be nicer if it was builtin is all I was saying.

[Saifadin]

I understand what you mean, but you have an edge case and I am pretty sure that is why it is is not built in. :)
Luckily you have an easy custom solution at hand :)

[browniefed]

Eh I'll close the issue, not exactly an edge case but I'm fine solving in user world.

[hegelstad]

I would say the current implementation is an edge case. The golden standard of dialogs/forms are non-jumping layouts. Thanks for showing how easy it is to implement ourselves, easy to forget some times!

However, I would suggest that this is implemented the proper way to support more devs in following good UX practices.

I am thinking that the ErrorMessage should always render, and then the user decides what to do with the errormessage that is passed in as a prop to the render function.