I am using Async component of react-select for inline editing in ag-grid. There is a event available in react-select component (onChange) which captures the value and action when we do changes. But when I hit enter button to select an item from dropdown the onChange method is not called. Reason I have noticed is the onBlur method is called after I hit the enter button on dropdown.
Below is the example of async component -
<Async
className = "async-multi-select"
classNamePrefix="react-select"
isMulti
defaultValue={[]}
id={"aync-react-select"}
{...this.props}
placeholder={""}
onFocus = {() => this.handleFocusChange(true)}
onBlur = {() => this.handleFocusChange(false)}
onChange = {(value,action) => this.handleChange(value,action)}
/>
Below are the events -
private handleChange(value: any[], action: ActionMeta): void {
if (this.props.onChange){
this.props.onChange(value,action)
}
this.setState({hasSelection: value.length > 0});
}
private handleFocusChange(hasFocus: boolean){
this.setState({hasFocus});
}
Any suggestion how can I ignore the onBlur event to be fired when I hit enter button?
I assume you're wanting the value of the selected item from the dropdown list when you click on the dropdown item. The onBlur event is triggered when you focus away from the input, and onChange is triggered only when you make changes within the input field. So, when you try pressing enter on the dropdown item you are essentially focusing away from the input and hence the onBlur event is called. Since you are able to press on the dropdown item, you could add an onClick prop on the item and pass the item's value to handleChange along with the action. You could update your dropdown component to something like the below:
<DropDownComponent
{...this.props} {/*Other props here*/}
onClick={()=> this.handleChange(value,action)}
/>
If you are mapping these dropdown items, you can get the value from the map item and the action should be manually passed. This way you can update the value to the dropdown item that is clicked.