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

问题

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.

回答1:

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

回答2:

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

回答3:

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

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

来源：https://stackoverflow.com/questions/54961077/react-select-is-there-a-way-to-remove-the-button-on-the-right-that-expand-the-l

标签

javascript

reactjs

react-select