Typeahead should add 'is-valid' and 'is-invalid' classes to its wrapper div when validating

[tophboogie]

Hi,
First off thanks for writing a great piece of software :)

When passing the isValid or isInvalid props to Typeahead, it would be great if it added the bootstrap classes 'is-valid' or 'is-invalid' to the typeahead wrapper div. This way, Form.Control.Feedback components would hide and display automatically when validating the form. Unless I am missing something, right now they need to be manually managed.

I looked into the Bootstrap 5 CSS and the feedback visibility is managed by

.is-invalid~.invalid-feedback { display: block; }

So for now I am manually adding these classes to the wrapper div in order to show the feedback, like so:

<Form.Group>
<Typeahead ... isInvalid={isTypeaheadInvalid} className={isTypeaheadInvalid ? 'is-invalid' : ''}  />
<Form.Control.Feedback type='invalid'>No {displayName} Selected!</Form.Control.Feedback>
</Form.Group>

This is working well but it seems like something that the component should just do on its own. Thanks!

[ericgio]

Hey @tophboogie, thanks for the feature request. Added in v6.1.0

[tophboogie]

Awesome, thanks!