React Material UI textfield с пользовательским автозаполнением при размытии

Question

Я реализовал пользовательскую функцию автозаполнения с помощью пользовательского интерфейса React Material следующим образом:

handleTextChange(e, key){
    dataObject[key] = e.currentTarget.value;
    //Call reducer to openAutoComplete
    //Call reducer to update state of dataObject
}
handleTextOnBlur(e, key){
    //Set the autocomplete to off since it's being used in a list of textFields
}
render(){
    return (
        <div>
            {Object.keys(dataObject).map(function(key){
                return (
                    <TextField
                        id={key}
                        defaultValue={dataObject[key] || ""}
                        onChange={(e)=>{this.handleTextChange(e, key)}}
                        onFocus={(e)=>{this.handleTextFocus(e, key)}}
                        onBlur={(e)=>{this.handleTextOnBlur(e, key)}}
                    />
                )
            }, this);}

            ...
            <Popper
            anchorEl={this.props.autocomplete}
            open={Boolean(this.props.autocomplete)}
            >
                {this.suggestions.map(function(s){
                    return (<ListItem onClick={this.makeSelection}> {suggesion.text} </ListItem>)
                }, this)}
            </Popper>
        </div>
    )
}

Проблема, с которой я столкнулся, заключается в том, что событие onBlur для закрытия автозаполнения вызывается, когда я нажимаю внутрисписок предложений, чтобы сделать выбор.Как я могу предотвратить onBlur, когда я щелкаю внутри списка предложений, но сохраняю поведение размытия по умолчанию, если это обычный onBlur?