Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

FormHelperText should not render when inside a FormControl that has isInvalid set

See original GitHub issue

Bug report

Describe the bug

The docs suggest that FormHelperText should be hidden when inside an invalid FormControl (reference), but this doesn’t actually happen; FormHelperText remains visible.

To reproduce

Render a FormControl with a FormHelperText and FormErrorMessage inside. Set isInvalid on the FormControl.

<FormControl isInvalid>
  <FormLabel>FormLabel</FormLabel>
  <Input />
  <FormHelperText>FormHelperText</FormHelperText>
  <FormErrorMessage>FormErrorMessage</FormErrorMessage>
</FormControl>

Observe: the FormErrorMessage displays (as it should), but the FormHelperText remains visible, which it should not.

Minimal reproduction

Sandbox: https://codesandbox.io/s/lingering-cherry-ub5fd?file=/src/index.tsx

Expected behavior

When a FormControl is set to isInvalid, the FormHelperText should not be rendered.

Screenshots

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

2reactions

segunadebayocommented, Sep 6, 2020

@with-heart, from my initial design, FormHelperText should not be visible when FormErrorMessage is shown. I think it’s a sensible default assumption.

I’ll check the docs and keep them in sync.

I merged @ChasinHues’s PR already.

@KarenEfereyan Thank you so much for wanting to help with this. @ChasinHues already created a PR hence the reason why I didn’t chime in on time to help you.

0reactions

ghostcommented, Sep 6, 2020

Okay

Top Results From Across the Web

FormHelperText disappears when isInvalid is set to true on the ...

Bug report Describe the bug When isInvalid is set to true on the FormControl the FormHelperText disappears To reproduce Email address.

Form Control - Chakra UI

If you render FormErrorMessage and isInvalid is false or undefined , FormErrorMessage won't be visible. The only way to make it visible is...

Material <Select> helperText does not work with react-hook ...

I'm using yup to display error/ ...

Chakra UI with 'redwoodjs/forms' elements - Solutions

Chakra UI with 'redwoodjs/forms' elements ... *The Chakra docs describe how to set isValid=false and display the FormErrorMessage. However, afaics ...

FormGroup and FormControl in Angular - LogRocket Blog

Every form input you have in a reactive form should be bound by a form ... in a group is invalid, the entire...