React select focus out when enter key is pressed within ag-grid

Question

I'm using a react select dropdown (as a custom framework component) within a ag grid to edit a field. However, when I do arrow down/up and hit enter key, the react select focus out and onBlur event is called before onChange. Is there any way I can prevent event bubbling?

ps - event.stopPropagation() and event.preventDefault() doesn't work.

Here is my AgGrid -

‹AgGridReact
gridoptions={this.gridoptions}
columnDefs=(gridHeaders.getDivDistcolumnDefs()}
rowData=(this.props.divDistributionsData}
onCellValueChanged={this.onCellValueChanged.bind(this)}
getRowNodeId=(this.getRowNodeId.bind(this)}
onCellClicked=(this.onCellClicked.bind(this)}
onRowDataChanged={this.autoSizeAll.bind(this)}
/>

Below is the grid Option where I have declared the customFramework component -->

private gridoptions: Gridoptions=
{
defaultcolDef:{
filter: "agTextColumnFilter"
resizable: true,
sortable: true,
editable: true,
}
floatingFilter: true,
rowselection: 'multiple'
singleClickEdit: true,
onGridReady: (params: any) => {
gridApi = params.api;
columnApi = params.columnApi;
this.setGridApiRef (params);
this.setColumnApiRef(params);
J.
components:
{
rowDropDownCellRenderer:HtmLUtils.rowDropDownCellRenderer,
entityIdCellRenderer:HtmlUtils.entityIdCelLRenderer
}
frameworkComponents:{
customCellEditor : CustomCelLAjaxSelectEditor
}
}

So here the CustomCellAjaxSelectEditor is my custom editor where I am using react-select async component. Below is the example how I have used custom component in column definition -->

field: MY_FIELD, headerName: MY_NAME, width: 400,
cold: MY_FIELD,
cellEditor:
"customcellEditor"
cellRenderer: "rowDropDownCellRenderer"
cellEditorParams:{
cellRenderer: "rowDropDownCellRenderer"
values: [{value:1, label:'a'}, {value:2, label:'b'}],
fieldName : MY_FIELD,
placeholderText: ""
minCharToSearch : 1
}
valueGetter: function (params: any) t
return params.data[DESK_NAME_FIELD]. Label;
}
valvesetter: function (params: any) {
return that.setcolumnValues(params, DESK_NAME_FIELD)
}

Now here is the code snippet for CustomCellAjaxSelectEditor -->

render() {
    return (
        ‹div style=({width: '300px',zIndex : 9999} >
        <AsyncMultiSelect
            placeholder={this. placeholderText}
            defaultOptions-{this.defaultDropdownOptions}
            value-{this. state.filteredOptions}
            loadOptions={this.loadOptions}
            FormatOptionLabel={(( value, label}) =>{
                return this.showKey && (undefined !== label 8& null != label && label !== ') ? (‹div className=("react-select-detail"}› <span>(label}</span></div>)
            }}
            onChange={
                (FilteredOptions: any) =› this.setState([filteredOptions: filteredOptions},
                () => {
                    if(filteredOptions) {
                    this.gridApi. stopEditing()}})
            }
            isMulti = {false}

        />
        </div›
);

Below is AsyncMultiselect component -->

<Asyne
    className="async-multi-select"
    classNamePrefix="react-select"
    isMulti
    openMenuOnFocus={false}
    defaultValue=(1]}
    id=("async-react-select")
    (...this.props)
    placeholder={""}
    onFocus={() => this.handleFocusChange (true) ›
    onBlur=(() =› this.handleFocusChange (false)}
    onChange={(value,
            action) => this.handleChange (value, action)}
    isClearable=(true)
/>


private handleChange (value: any[], action: ActionMeta): void (
    if (this.props.onChange) {
        this.props.onChange (value, action);
    }
    if (value)
    this.setState( (hasselection: value.length › 0r);
}


private handlefocusChange(hasfocus: boolean) {
this. setState((hasFocus));
}

Is there anything I am missing why keyboard enter is calling onBlur method instead of onChange? I'm open for any suggestion. I can use any other component if react select behaves differently within ag-grid.