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
    return (
                return (
                        defaultValue={dataObject[key] || ""}
                        onChange={(e)=>{this.handleTextChange(e, key)}}
                        onFocus={(e)=>{this.handleTextFocus(e, key)}}
                        onBlur={(e)=>{this.handleTextOnBlur(e, key)}}
            }, this);}

                    return (<ListItem onClick={this.makeSelection}> {suggesion.text} </ListItem>)
                }, this)}

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