React-select: Remove Options Drop-Down

[emorling]

Is it possible to remove the drop-down for creatable? So it simply works like an input box for tags, without a select?

[avinmathew]

You can hide it via CSS:

.hide-options .Select-arrow-zone {
    display: none;
}

.hide-options .Select-menu-outer {
    display: none;
}

<Creatable
    className="hide-options"
/>

[alimaqsood95]

In addition to the answer provided by @avinmathew , add the following overridden style to normalise the react-select when focused

.Select.is-open > .Select-control {
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
}

[benjie91]

For V2, it is quite hackish in order to remove the dropdown. I did it by using the following css selector.
.hide-options > div > div:last-child { display:none; }

Is there any plan to implement this feature on react-select?

[a-borodko]

Looks like this is it: https://react-select.com/creatable (latest example)

[jamesvclements]

The replaceableComponents API gives you full control over how each component renders, so to remove the Dropdown you can just return null:

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

you'll probably want to remove the separator as well:

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

[sarah-young]

To hide the dropdown (aka Menu):

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

Documentation link: https://react-select.com/components

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!