React-select: Option with value === 0 is rendered as placeholder

Created on 9 Aug 2016  路  9Comments  路  Source: JedWatson/react-select

Any option that has value of 0 (zero) is rendered as placeholder when selected.

To reproduce:

  1. Have a select with at least two options, where one of the options has value of 0 (zero) and other option(s) has "truthy" value.
  2. Select the option with "thruthy" value.
  3. Select the option with value of 0

Observed:
On step 2 the color of the label (in the main box) is dark grey.
On step 3 the color of the label (in the main box) is light grey (like a placeholder)

Desired:
On both steps the color of the label is dark grey.

P.S. on investigation, the div holding the label has a style named "Select-placeholder".
P.P.S. reproducible on version 0.9.1

Most helpful comment

Problem is back/still there in v1.0.0-rc.5

CC: @JedWatson

All 9 comments

I ran into this problem as well. When the value is 0, the value expander returns 0, and then
return expandedValue ? [expandedValue] : [];
returns an empty array, because 0 is falsy in js.

We wanted to have the values correspond to array indices, but that meant the first value was always bugged. We had to manually +1 to all the values, and -1 to return to indices.

Fixing this one line to explicitly check for nil, undefined, and NaN should solve the problem.

Not reproducible in master

Got a similar problem which is easily reproduced by setting clearable to true.

const users= {
{ id: 0, name: 'User 1'},
{ id: 1, name: 'User 2'},
{ id: 2, name: 'User 3'}
};

When User 1 is selected. Adding support for zero based collections would fix the problem.

@andreme @hellqvist I think this got patched out in a fix already.

"fixed; issue where a value of the number 0 would be assumed to be no value, thanks Hanwen Cheng
" - V1.0.0.rc, Sep. 9

This was an issue at the time when the original issue was opened, I wasn't on the most recent version when I posted, and I suspect Hellqvist is in the same boat.

It's probably safe to close this as resolved.

I'm actually using 1.0.0-rc.2 since it's needed by React-virtualized-Select (https://github.com/bvaughn/react-virtualized-select) which I'm using in another part of my project.

I can't find the issue you are referring to, can you post a link?

Saw the same issue in v0.9.1 but it's definitely working now in v1.0.0-rc.3. Thanks!

Problem is back/still there in v1.0.0-rc.5

CC: @JedWatson

still seeing this issue in 1.2.1

you can overcome it by using "0" and then making sure to parse it as a number later.

Hello -

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

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our limited efforts to maintain the latest 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 / pull request 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!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

sampatbadhe picture sampatbadhe  路  3Comments

yrabinov picture yrabinov  路  3Comments

steida picture steida  路  3Comments

coder-guy22296 picture coder-guy22296  路  3Comments

MalcolmDwyer picture MalcolmDwyer  路  3Comments