react-select (AsyncSelewhen typing) not deleting - react-select

Question

I have a dropdown using AsyncSelect that when trying to clear it up it doesn't clear. As I have the setup right now I have to: display a previously selected value upon rendering (set by the state, which in turn gets its initial value from a prop), be able to update this value (onChange), be able to type into the input a string to search. Right now, after having a value pre-populated, when I click on the dropdown to type and search, my input doesn't get cleared and I don't see what I input, almost as if the input wasn't allowing edits.
Update: for example, when I click over the drop down I see the cursor but if I hit "delete" the value is not reset.
Any help will be appreciated it.
import React, { Component } from 'react';
import AsyncSelect from 'react-select/async';
class DropDown extends Component {
constructor(props) {
super(props);
this.state = {
selectedValue: null,
loaded: false,
};
this.onChange = this.onChange.bind(this);
this.loadOptions = this.loadOptions.bind(this);
}
componentDidMount() {
const { value } = this.props;
this.setState({ selectedValue: value, componentMounted: true });
}
onChange(value) {
const { updateParent } = this.props;
this.setState({ selectedValue: value });
updateParent(value);
}
// this returns a promise with my data
loadOptions() {
const { getDropDownOptions } = this.props;
return getDropDownOptions();
}
render() {
const { selectedValue, loaded } = this.state;
return (
loaded && (
<AsyncSelect
defaultOptions
isClearable
inputValue={selectedValue}
onChange={event => this.onChange(event)}
loadOptions={this.loadOptions}
{...{ ...this.props }}
/>
)
);
}
}
DropDown.defaultProps = {
isClearable: true,
};
export default DropDown;

Answer 1

You are passing the selected option which is of shape { value : '1', lable:'apple' } as the input value to the <AsyncSelect/>, there is no need to explicitly pass the input value into the component since it will be managed from inside Select component. Just change,
<AsyncSelect
...
inputValue={selectedValue}
...
/>
to
<AsyncSelect
...
value={selectedValue}
...
/>