`clear()` method doesn't clear the input when called in `onChange` on an uncontrolled Typeahead

My Typeahead component:

<Typeahead
              ref="SubjectTypeahead"
              placeholder="Search Subjects"
              onChange={this.onSearchSubjects}
              options={subjectNames}/>

My onChange function:

  onSearchSubjects = (values) => {
    if (values.length > 0) {
      this.refs.SubjectTypeahead.getInstance().clear()
      this.props.onSearchSubjects(values[0])
    }
  }

When selecting a value form the typeahead, my onChange method gets called, but the value selected doesn’t get cleared.

Any idea what I might be doing wrong?

Thanks

[agarhy]

This is how it works with me in a functional component hope it help.

import React, { useState, useEffect, useRef } from 'react'
import { Typeahead, withAsync } from 'react-bootstrap-typeahead';
const AsyncTypeahead = withAsync(Typeahead);

function SearchAdmins(props) {

const typeahead = useRef(null);

const onChange = values => {
        if (values.length)
            typeahead.current.clear()        
}

return (
<AsyncTypeahead
    id="searchUsers"
    ref={typeahead}
    onChange={onChange}
    useCache={true}
/>
)

}

[jeffmcaffer]

Awesome. Not sure this is a controlled/uncontrolled question though. My really code gets the list of options in as a prop. The only reason to use ref here is to get access to the component to call clear. Otherwise the DOM is not used/accessed.

In my case the Typeahead is a fast way to populate a secondary list. The list prop coming into this component does not change, the user just keeps picking more entries. So no props change, no update.

@ericgio one thing to consider is building in the notion of clearing on change. For example, a new prop clearOnChange or some such. That would address at least some of the scenarios and remove the need for ref and infinite loop checking… Of course, there are more scenarios so it is not the full answer.