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.

You can use their custom styles implementation https://react-select.com/styles If you put your code sample up somewhere interactive like codepen or codesandbox someone could have a look. — sanjsanj, Mar 02 '19 at 17:36
OK, I will do it. I got the answer for the second point: openMenuOnFocus={false} openMenuOnClick={false} — acmoune, Mar 02 '19 at 17:47

rajesh kumar · Accepted Answer · 2020-08-10T08:15:55.087

96

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

edited Aug 10 '20 at 08:15

answered Aug 07 '19 at 17:56

rajesh kumar

1,578
16
14

8

I had to use `DropdownIndicator:() => null, IndicatorSeparator: () => null` because it was also leaving separator even if the dropdown indicator was removed – nickornotto Jun 20 '20 at 17:56

score 48 · Answer 2 · answered Oct 07 '19 at 08:50

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

score 3 · Answer 3 · answered Jan 22 '21 at 07:36

Use styles={customStyles}, where:

// Here are right side idicators X and \/ . We can use each one separate or the hole Indicator Container!
    // clearIndicator: (prevStyle, state) => state.isMulti ? ({
    //     ...prevStyle,
    //     display: 'none'
    // }) : null,
    // dropdownIndicator: (prevStyle, state) => state.isMulti ? ({
    //     ...prevStyle,
    //     display: 'none'
    // }) : null,
    indicatorsContainer: (prevStyle, state) => state.isMulti ? ({
        ...prevStyle,
        display: 'none'
    }) : null,
}

Additional check for state.isMulti set them to none or not. If you don't need additional check, just remove ternary operator state.isMulti and : null

sanjsanj · Answer 4 · 2020-02-18T13:57:11.570

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

It worked, I added `className` and `classNamePrefix` of `react-select` for both, then I was able to hide them with `.react-select__indicators { display: none; }`. Thanks — acmoune, Mar 02 '19 at 20:04

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

4 Answers4

Linked