React-select: [v2] Setting value to undefined doesn't show the placeholder text

[denchp]

Setting the value of the select component to null/undefined does not reset the control to a state where the placeholder text is displayed:

https://codesandbox.io/s/jnkzp95r4w

[kaareal]

try to set the value to zero
see https://codesandbox.io/s/9yoxy46l0p

[gwyneplaine]

Hi, @denchp setting the value to null should clear the value internally.
https://codesandbox.io/s/98n2v97plw

The reason this is happening is because the negative result of Array.prototype.find() is undefined and not null.

react-select takes an undefined value prop as indication for it to use internal state to manage the selected value. To clear the selected value in the component please explicitly set the value prop to null.

This is very much inline with the intention of these two values in javascript, where undefined is an unset value and null is explicitly the intentional absence of an object value.

issue closed

[zwbetz-gh]

Thanks @gwyneplaine. Replacing { value: '', label: '' } with null fixed my placeholder issue.

[Slapbox]

Seems kind of silly that if I backspace away the entire inputValue and pass value={undefined}, the placeholder doesn't appear.

To make it work properly I've had to use:

  <CreatableSelect
    value={value === undefined ? null : value}
  />

@gwyneplaine I feel like this is a (quite minor) bug and shouldn't be closed. The issue remains in 3.0.8. I didn't realize 3.1.0 was out, so I'll give that a shot and report back.

Edit: Issue persists in 3.1.0. Perhaps there's a good reason for requiring null to clear the rendered text in which case this isn't a bug? Right now I believe it's a bug though.