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

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


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


To expand on rajesh kumar's answer, you can remove the dropdown indicator and the indicator separator (the horizontal line between the selection text and the dropdown arrow) using the following:

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


EDIT: This is for an older version.

Styling react-select is doable but you need to jump through a few hoops.

You have some auto-generated elements you can target to style - https://react-select.com/styles#style-object

In order to find what the style-key is for the element you want to target is look at this - https://github.com/JedWatson/react-select/issues/3135#issuecomment-432557568

^ You need to add a className and classNamePrefix to the Component to see what it actually is. Their docs could do with some work but I see a big backlog of issues and PRs on the repo so I think the odds are slim that that will happen soon.

Then you can style that key as described - https://react-select.com/styles#provided-styles-and-state