I've implemented a custom autocomplete feature using React Material UI as follows:

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>
    )
}

The problem i'm facing is that the onBlur event to close the autocomplete gets triggered when I click inside the suggestion list to make a selection. How can I prevent the onBlur when I click inside the suggestion list but keep default blur behavior if it's a regular onBlur?

0 Answers