React-bootstrap-typeahead: Valid feedback and invalid feedback

[gagarski]

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

[ericgio]

Yeah, unfortunately the use of container elements for the overall component as well as the hint breaks some of Bootstrap's styles. I've added some custom CSS to the package to help mitigate that, but it doesn't solve every case.

v4.0 introduces a renderInput prop that provides much more control over the rendering of the input itself. That would allow you to position the feedback elements as siblings of the input the way you describe. Unfortunately, that creates its own set of issues because of styles applied to the hint container and positioning of the menu. You could get around them by forgoing the hint functionality, but that's kind of a bummer. Another big limitation is the use of input groups with appended or prepended elements, which rely on pretty specific CSS and element adjacency to work correctly.

Here's a sandbox demonstrating some of the issues: https://codesandbox.io/s/4w01px4z6x

In the future it's possible that using "invisible" elements like React.Fragment or containers with display: contents; might help, but I can't really consider those solutions yet for browser- and backwards-compatibility reasons. For now, the workaround of manually displaying the feedback elements is probably the best solution, but I'm open to ideas and suggestions.

[H-a-w-k]

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

[jamesinsf-git]

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

Typeahead doesn't allow you to override the className

[ericgio]

@jamesinsf-git: It does allow setting your own classnames, actually. They get added to the containing div. I updated the sandbox from earlier in the thread to incorporate @H-a-w-k's tip and show how you can use the Typeahead and feedback components together:

https://codesandbox.io/s/rbt-validation-feedback-example-4w01px4z6x

[jamesinsf-git]

@ericgio only available in sandbox right now?

[ericgio]

@jamesinsf-git: I'm not understanding your question. The ability to add your own classnames has been available since at least v1.0

[ericgio]

I've added the above sandbox link to the Examples section of the README. I think we can consider this issue closed unless there's something else I'm missing.

[petero-dk]

Perhaps what @jamesinsf-git wanted to say is that in TypeScript it does not seem like it supports setting the ClassName it works but the editor will complain

[ericgio]

@petero-dk: That's possible. I don't maintain the TS typings, though. If you're encountering problems with those, please submit an issue to the DefinitelyTyped repository.

[karlderkaefer]

from stackoverflow you can add classes like like this

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

check my example sandbox with typeahead and formik