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

javascript reactjs react-select
acmoune picture acmoune · Mar 2, 2019 · Viewed 12.1k times · Source

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

rajesh kumar picture rajesh kumar · Aug 7, 2019

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 }}
 />

Related questions

How to programmatically clear/reset React-Select?

ReactSelect V2 and V3 seems to have several props like clearValue, resetValue and setValue. Whatever I'm trying, I'm not able to clear the selections programmatically. resetValue seems not to be accessible from the outside. selectRef.setValue([], 'clear') // or selectRef.clearValue() …

Read More
How to use Select2 with Reactjs?

I have dependent fields like this <List> <select> <option></option> <option></option> </select> <select> <option></option> <option></…

Read More
Formik & yup form validation not working as expected with VirtualizedSelect

I created a form with formik in order to have form validations. I have used the components Formik, Form, Field form formik and configured them: import { Formik, Form, Field } from "formik"; import { object, string } from "yup"; import isEmpty from "lodash/…

Read More