React-bootstrap-typeahead: Required Validate on react-bootstrap-typeahead

[darshanawollstra]

I'm getting trouble with react-bootstrap-typeahead. If the typehead property is not selected any selection, it works properly but once i select a selection from the typehead and then clear the selected value on the typehead, it doesn't trigger the required validation on the typehead. Any idea on this?

[ericgio]

Can you please post a code example (JSFiddle/Codpen, etc) with a more in-depth description of the behavior you're expecting? Note that the typeahead doesn't have any built-in validation, so I'm not sure what you're referring to.

[darshanawollstra]

This is the component i've used the typehead. I need to add required validator for this component. Form is not submitting if the typehead options are selected. Once we select item(s) from the typehead and then clear the typehead selected options, it allow me to submit the form without any selected option in the typehead. Hope you got the point.

[ericgio]

The validation state should have nothing to do with the typeahead itself; your question is in regards to React-Bootstrap, which is a different library. You need to pass the proper state to the FormGroup. See this example.

[darshanawollstra]

Got it. Thanks for your immediate response on this.

[santoshrode19]

this.typeahead.getInstance()._input.setAttribute("required","true");
The bootstrap validation trigger automatically.

[rubendinho]

EDIT: There is a much cleaner and simpler way to do this - please see @ericgio's answer below.

Here is how I accomplished this with a functional component:

let typeahead = useRef()
useEffect(() => {
  typeahead.getInstance().getInput().setAttribute('required', 'true');
})

...

<Typeahead
  ...
  ref={ref => (typeahead = ref)}
</Typeahead>

[ericgio]

Here's a better way to set the required attribute (or any other attribute) on the input:

<Typeahead
  ...
  inputProps={{ required: true }}
</Typeahead>

[rubendinho]

Ahh - that's much better. I missed this in the docs. Thanks @ericgio!

[ywang04]

@ericgio I just clone this code sandbox(https://codesandbox.io/s/zen-shtern-w09tb?file=/src/index.js:547-557) and found that add inputProps is working when clicking submit button for a form validation.
Do we support any customized validation instead of using chrome's default behavior? Thanks in advance.

[ericgio]

@ywang04: yes! Here's an example using Bootstrap validation states. It's up to you to add the type of validation you'd like.