Closed arahansen closed 7 years ago
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.
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.
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
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 .
@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?
@arahansen why did you close this issue?
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.
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.