React-select: Removing completely the create new option label

[junibrosas]

The library is very cool and very customisable. I am having a hard time removing completely the "Create option 'x'" label. I can use promptTextCreator={(label) => ''} but there is still empty tag remain. I want to completely remove the label but still able to add new option via key down.

[sandinosaso]

How about:

promptTextCreator={(label) => undefined}

[joaoeffting]

@sandinosaso It didn't work to. Still a "empty" space in the selects

[brunoarueira]

Hey @joaoeffting and @junibrosas,

I have found a solution for this problem, it's a workaround.

<Select.Creatable
  onChange={this.onChange}
  promptTextCreator={() => false}
  newOptionCreator={({ label, labelKey, valueKey }) => {
    const show = !label

    const option = {}
    option[valueKey] = label
    option[labelKey] = label
    option.className = classnames(
      'Select-create-option-placeholder',
      [styles.hide_placeholder]: show,
    )
    return option
  }}
  value={this.props}
  options={this.props.options}
  isLoading={this.props.fetching}
  labelKey="name"
  valueKey="id"
/>

.hide_placeholder {
  display: none !important;
}

The main trick is:

• First set the promptTextCreator to return false:

  promptTextCreator={() => false}

• And after, define a newOptionCreator to handle that option, like so:

  newOptionCreator={({ label, labelKey, valueKey }) => {
    const show = !label

    const option = {}
    option[valueKey] = label
    option[labelKey] = label
    option.className = classnames(
      'Select-create-option-placeholder',
      [styles.hide_placeholder]: show,
    )
    return option
  }}

It's still a thick line, but someone could improve this. My css skills are limited.

[jnachtigall]

@brunoarueira I simply used this to disable (not show) the promptTextCreator:

.Select-create-option-placeholder {
  display: none;
}

Not sure why you need to use newOptionCreator for this because the promptTextCreator has a uniq css class with .Select-create-option-placeholder that can be used for this.

[brunoarueira]

@jnachtigall Great, when I return to the feature which uses the react-select I'll try your suggestion! Thanks, btw

[bbinoy]

You can just use isValidNewOption={() => false}

[dwightware4]

You can just use isValidNewOption={() => false}

I'm really confused about why this solution is so well received. This doesn't merely hide the create label, it completely disables the create functionality....if you don't want the create functionality, then why would you even be using Creatable in the first place?

I'm still struggling to find a way to hide the create label in the dropdown without completely breaking all functionality.