After selecting an option, typehead doesn't work until blur and refocus

[apaleslimghost]

[zikphil]

Same issue on my end.

This fixed it for me, i added this to my onOptionSelect callback:

this.refs.typeahead.setEntryText('');
this.refs.typeahead.setState({ showResults: true })

[apaleslimghost]

I fixed it by doing a manual blur/focus on the input, which is horrible 😕

[NickBrooks]

Same issue - fixed thanks to @zikphil

[shawn-simon-developer]

You can also use an onchange event and the typeahead as a ref similar to @zikphil

if (this.typeahead.state.showResults !== true) {
	this.typeahead.setState({ showResults: true });
}

[Richard-Thompson]

does anyone know if there is a fix to this? i have tried @zikphil's method and it didnt work...

[apaleslimghost]

@Richard-Thompson have you tried my workaround?

[Richard-Thompson]

I'm not using the tokeniser version just the other standard typeahead version, so Im not sure how to integrate that into my code base. Here is my code for the typeahead:

        <Typeahead
            defaultValue='o'
            ref='typeahead'
            options={this.props.playlists}
            filterOption='songTitle'
            maxVisible={10}
            displayOption={(option) => {
              return option.songTitle;
            }}
            onOptionSelected={(option)=> {
                this.refs.typeahead.setEntryText('');
              browserHistory.push(`/playlist/${option.playlistTitle}`);
            }}
            customClasses={{
              input: "topcoat-text-input",
              results: "results-container",
              hover: "result-active"
            }} 
            className={`${this.props.screenSize} form-control mr-sm-2`}
        />

[apaleslimghost]

in onOptionSelected, adding this.refs.typeahead.refs.entry.blur() ; this.refs.typeahead.refs.entry.focus() should work

[Richard-Thompson]

all im getting is

maybe the package has changed this this fix was stated?

[apaleslimghost]

ah, sorry, typo. it should be this.refs.typeahead.refs.entry.blur() (same for focus as well)

[Richard-Thompson]

Thanks, this has worked, I was so close to using .entry wasn't too sure. Anyway thanks for the help!