Option to programmatically close dropdown?

[arahansen]

Is there an option to set a flag that will force the typeahead dropdown to close?

Example use case: User blurs out of the typeahead element, I would like the dropdown to close even if there are still options being suggested.

Currently, the dropdown stays open until an option is selected.

[vrunjeti]

This is somewhat of a workaround, but I managed to accomplish this with something like this:

constructor(props) {
  super(props)
  this.state = { hideDropdown: false }
  // bind functions listed below
}

closeDropdown() {
  this.setState({ hideDropdown: true })
}

showDropdown() {
  this.setState({ hideDropdown: false })
}

render() {
  const yourOptions = [ ... ]
  return (
    <Typeahead
      options={this.state.hideDropdown ? [] : yourOptions}
      onBlur={this.closeDropdown}
      onFocus={this.showDropdown}
    />
  )
}

Essentially, this makes use of how the selector won't render if there are no options by setting your options to an empty array when the input is blurred. So I guess it's a workaround since it doesn't directly close the dropdown, but puts it in a state to not show up at all.

[burmester]

I tried to use this workaround, but if you are using "customListComponent" and relay a onClick function thought ex displayOption, onBlur is called before onClick.

[druellan]

I have the same problem as @burmester, the input is not populated because the onBlur wipes the list before the onOptionSelected event.

Related to #104

[thehuey]

You should be able to empty out the input value, which should remove the selection dropdown.

On Thu, Sep 15, 2016 at 8:02 AM, Dario Ruellan notifications@github.com wrote:

I have the same problem as @burmester https://github.com/burmester, the input is not populated because the onBlur clear the list before onOptionSelected.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/fmoo/react-typeahead/issues/169#issuecomment-247354293, or mute the thread https://github.com/notifications/unsubscribe-auth/ABWSYyvsUCiF0cswEtFVWNxXBYV5fymuks5qqV37gaJpZM4H4QSL .

[druellan]

@thehuey thanks! Yes, but that means the user will lost the input on blur, which is not ideal, and in fact a bit annoying.

And BTW, is there a way to do that without touching the DOM directly?

[zjr]

@arahansen why did you close this issue?

[ewan-laws]

I had the same problem after implementing the solution provided by @vrunjeti.

I solved it with the following, it's not pretty though:

1) turning my custom list component into a class as the Typeahead component was trying to use the ref. 2) Putting the closeDropdown in a timeout:

    setTimeout(() => { this.setState({ hideDropdown: true }); }, 250);

I think underscore and probably lodash have a defer function that will make more elegant code.