Valid feedback and invalid feedback

Is your feature request related to a problem? Please describe. I am trying to use Bootstrap form validation together with react-bootstrap-typeahead using form feedback divs. Bootstrap toggles visibility of feedback components based on classes of sibling form-control element. If I am adding the feedback as I do usually with regular inputs:

<Typeahead {...someProps} isInvalid/>
<div class="invalid-feedback">The value you have entered is terrible!</div>

the feedback is not shown because .invalid-feedback is not a sibling to RBT .form-control (.form-control is wrapped with .rbt-input-hint-container). It is not possible (as far as I know) to describe this DOM relationship with CSS (to toggle .invalid-feedback visibility based on RBT DOM).

Describe the solution you’d like It would be nice to have validFeedback/invalidFeedback properties in <Typeahead/> component. RBT can add this feedback elements near the input.form-control. Probably the same logic should apply for validTooltip/invalidTooltip.

Describe alternatives you’ve considered With the current state of RBT this can be worked around as follows (using a wrapper component):

// JS
    render() {
        return <>
                <Typeahead
                    {...someProps}
                    isValid={this.props.isValid}
                    isInvalid={this.props.isInvalid}
                />
            {
                this.props.isValid && this.props.validFeedback ?
                    <div className="valid-feedback forced-feedback">{this.props.validFeedback}</div> : null
            }
            {
                this.props.isInvalid && this.props.invalidFeedback ?
                    <div className="invalid-feedback forced-feedback">{this.props.invalidFeedback}</div> : null
            }

        </>
    }

/* CSS */
.valid-feedback,.invalid-feedback {
  &.forced-feedback {
    display: block;
  }
}

I am not using bare Bootstrap 4 but this work in my environment as it does with usual .form-controls

[H-a-w-k]

You can add className={classNames(isInvalid && “is-invalid”)} to your Typeahead

[karlderkaefer]

from stackoverflow you can add classes like like this

<Button {...(condition ? {bsStyle: 'success'} : {})} />

check my example sandbox with typeahead and formik