The value and label with empty string doesn't display properly

[hyphen1370]

Hello,

I have a select option like this: selectOptionList: [ {value: '', label: ''}, {value: 'Y', label: 'Y'}, {value: 'N', label: 'N'} ]

I call react-select like this <Select id={"alter_itemcheck" + selectID} value={{value: this.state.selectedOption, label: this.state.selectOption}} onChange={this.changeSelectOption} options={this.state.selectOptionList} />

However, you can see in the attachment, the value and label with empty string doesn't have the same height as other options. Is there anyway to make all three options with the same height?

Thanks

[M-Yankov]

If your intend is to use this option to clear the selected value, then you could use isClearable.

[hyphen1370]

No, I don't want to clear the selected value, I want to have empty string as a selected option.

Thanks

[andrea-ligios]

@hyphen1370 take a look at defaultValue / defaultInputValue props: https://react-select.com/props#statemanager-props (and, if it works, consider answering here to help future visitors)

[cutterbl]

Perhaps css line-height can't calculate, because there is no text? Maybe leave the value empty, but try a label of one space?

[hyphen1370]

andrea-ligios, is doesn't work. For a workaround, is there anyway to change font color for particular option in the dropdown list? For example, I can put 'empty' as label for value "", change color to white, which match the background color of the dropdown, to make to option "invisible"?:

[rationalthinker1]

I had this problem too. I fixed it by a hack but it works

<Select classNamePrefix="input-field-select" id={name} name={name} options={options}/> then in my css,

.input-field-select__option {
  min-height: 40px;
}

[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!

[JedWatson]

Just as we close this out, I've got a couple of suggestions:

As @rationalthinker1 said, you can add a min-height, the alternative for that if you don't want to put the styles in your stylesheet is to use the styles override:

<Select
  styles={{ option: styles => ({ minHeight: 40, ...styles }) }}
  id={name}
  name={name}
  options={options}
/>

Probably a better solution is to actually give the option a label though, and style it so the text is transparent (@hyphen1370 asked about whether you can do this)

It's a bit more code, but will work better for accessibility (e.g screenreaders will say "empty" instead of nothing)

<Select
  styles={{
      option: (styles, { data }) => ({
        ...styles, color: data.value === '' ? 'transparent' : styles.color
      }),
      singleValue: (styles, { data }) => ({
      ...styles, color: data.value === '' ? 'transparent' : styles.color
      }),
  }}
  id={name}
  name={name}
  options={options}
/>

This is where the power of using css-in-js is really obvious, because we're only applying the style to options that have an empty string as their value.

(Note that you'll want to style the singleValue component as well as the option, or the multiValueLabel component for a multiselect. You could also put that in a single function so you're not repeating it, but I included the long form example to make it clear what's going on)