react-select: Is there a way to remove the button on the right that expand the list, at least in async mode?

Question

I am using AsyncSelect and I would like to hide the arrow-down button on the right, the one that display the list of options.

It can make sense when there are default options. But it my case I have none, so that button makes no sense it my situation.

Is there a way to remove/hide it, when in async mode and there no default options ?

Below is the code

<AsyncSelect   placeholder="Search ..."   cacheOptions   defaultOptions={false}   value={this.state.currentValue} // Default to null   loadOptions={this.fetchOptions}   onChange={...}   isClearable /> 

Also, is it possible to disable the fact that the component display an empty list when it get the focus, and only display matched options when at least one character is entered.

Sorry for asking two in one.

Thanks in advance.

Answer 1

We can remove the dropdown indicator by including DropdownIndicator: () => null in components property.

Update:As @shlgug and @nickornotto suggested remove separator by including IndicatorSeparator:() => null

<Select    components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}  />