input value to be erased in react-bootstrap-typeahead

Question

using formik and react-bootstrap-typeahead, I am having 2 typeaheads inside formik

What i am trying to do is, I have 2 typeaheads, depending on the option selected from typeahead-1, I'm getting the options for the typeahead-2 and it works absolutely wonderful

                    <Formik
                        initialValues={{list:'',listOne:''}}
                        onSubmit={this.modalSubmit}
                        validationSchema={Yup.object().shape({
                            list: Yup.string().required("Select ID"),
                            listOne: Yup.string().required("Select ID"),
                        })}
                    >
                        {props=>{
                            const {
                                values,
                                touched,
                                errors,
                                dirty,
                                isSubmitting,
                                handleBlur,
                                handleSubmit,
                                handleReset,
                                setFieldValue,
                                setFieldTouched,
                            } = props
                            return(

                                <Form className="bootstrap" onSubmit={handleSubmit}>
                                    <Form.Row className='row-form'>
                                        <Form.Group as={Col} md={6} sm={6} lg={6} xl={6}>
                                            <Form.Label>Client ID</Form.Label>
                                            <div className='custom-dropdown'>
                                            <i className="fal fa-angle-down fa-angle-assign"/>
                                            <Typeahead
                                                id='list'
                                                name='list'
                                                valueKey="id"
                                                placeholder="Select ID"
                                                options={listOptions}
                                                onBlur={(e) => {setFieldTouched("list", true)}}
                                                isValid={touched.list && !errors.list}
                                                isInvalid={!!errors.list}
                                                onChange={async selected=>{
                                                    if(selected[0]){
                                                        setFieldValue('list',selected)
                                                        await Options.loadListOneOptions(selected[0].id)
                                                        const getListOneOptions = Options.getListOneOptions
                                                        this.setState({
                                                            listOneOptions: getListOneOptions,
                                                        })
                                                    }
                                                }}
                                            />    
                                            </div>
                                            {errors.list && touched.list && (<div className="input-feedback">{errors.list}</div>)}
                                        </Form.Group>
                                        <Form.Group as={Col} md={6} sm={6} lg={6} xl={6}>
                                            <Form.Label>Select ID</Form.Label>
                                            <div className='custom-dropdown'>
                                            <i className="fal fa-angle-down fa-angle-assign"/>
                                            <Typeahead
                                                id='listOne'
                                                name='listOne'
                                                valueKey="id"
                                                placeholder="Select ID"
                                                options={this.state.listOneOptions}
                                                onBlur={(e) => {setFieldTouched("listOne", true)}}
                                                isValid={touched.listOne && !errors.listOne}
                                                isInvalid={!!errors.listOne}
                                                onChange={...}
                                            /> 
                                            </div>
                                            {errors.listOne && touched.listOne && (<div className="input-feedback">{errors.listOne}</div>)}
                                        </Form.Group>
                                    </Form.Row>
                            
                                    <Form.Group style={{textAlign:'center'}} className='row-form'>
                                        <Link to='...'>
                                            <Button type='submit' id='cancelButtonStyle' style={{marginRight:'10px'}}>Cancel</Button>
                                        </Link>
                                        <Button type='submit' className="btn-default" style={{textTransform:'none',borderRadius:'0%'}}>Submit</Button>
                                    </Form.Group>
                                </Form>
                            )
                        }}
                    </Formik>

Problem :-

how to erase the input value entered in search for typeahead-2 when different option is selected in typeahead-1

Scenario steps :

1. select option from typeahead-1, loads the options to typeahead-2
2. input some value in search bar and select an option from typeahead-2
3. go to typeahead-1 and select any other option and loads the options to typeahead-2,... but here the input value in search for typeahead-2 is still there as entered in step-2

i want know how the input value in search for typeahead-2 to be erased when different option is selected in typeahed-1

Answer 1

I got it resolved by using ref

// create a ref
this.typeaheadRef = React.createRef()

// add ref to typeahead-2
<Typeahead
  ref={this.typeaheadRef}
  ...
/>

// use the ref in onChange of typeahaed-1, current.clear() will clear the input
<Typeahead
  ...
  onChange={ selected=>{
      ...
      this.typeaheadRef.current.clear()
      ...
    }      
  }
/>

Hope this will help others