React-select: no visual indication of an invalid initial value
I've realized that when I send an initial value to a react-select component that is NOT part of the options set, not only does this initial value not display in the component, but the component behaves as if the value were there, only not visible. In other words, what I see in the input is the placeholder text + the clear icon (x). I think this is confusing for a few of reasons:
1- The initial value sent does not display
1- One can actually clear the 'invisible' value (in this case, the clear icon disappears from the input)
2- Nothing visually indicates that the initial value was invalid
Is this a bug or as designed? Ideally one would see some sort of visual indication that an initial value is invalid (some ideas: i) a red border around the component, ii) some optional text displaying only in these cases, etc. ).
pgoldweic
All 3 comments
Can we bump this? I see no solution in the issues and I've been fighting this same problem for a week now.
nicknmejia
on 27 Apr 2017
For anyone having this same issue I found that the value being passed to React Select must be an object with the same mapping as your valueKey and labelKey values {value: props.value, label: props.value} it doesn't have to be an option. If you pass React Select a string as the value it will set the "value" but there is no "label" so it won't display anything but it will make the clearable marker display to remove the "value". Passing an object will make it work properly.
If you have options already set and it can find the value and match the value it will use the correct label.
<Select value="one" options={[{label: "One", value:"one"}]} />
If you don't have any options set but you want to set a value. Say you are using Select Async you can pass the value as an object. Without passing an object it will just show an invisible value with the clearable X. You cannot pass just a string value it you have no options predefined.
<Select value={{label: "One", value: "one"}} />
This is not very clear in the documentation.
KrisCoulson
on 30 May 2017
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 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.
bladey
on 27 May 2020
Related issues
sampatbadhe
路
3Comments
geraldfullam
路
3Comments
steida
路
3Comments
Meesam
路
3Comments
pablote
路
3Comments
Most helpful comment
For anyone having this same issue I found that the value being passed to React Select must be an object with the same mapping as your valueKey and labelKey values
{value: props.value, label: props.value}it doesn't have to be an option. If you pass React Select a string as the value it will set the "value" but there is no "label" so it won't display anything but it will make the clearable marker display to remove the "value". Passing an object will make it work properly.If you have options already set and it can find the value and match the value it will use the correct label.
<Select value="one" options={[{label: "One", value:"one"}]} />If you don't have any options set but you want to set a value. Say you are using Select Async you can pass the value as an object. Without passing an object it will just show an invisible value with the clearable
X. You cannot pass just a string value it you have no options predefined.<Select value={{label: "One", value: "one"}} />This is not very clear in the documentation.