React-select: Initial value for Select.Creatable not working

[MartinDawson]

I'm using redux form and somewhere up in the tree I do:

initialValues: {
  album: 'album',
}

Field:

<Field name="album" component={AlbumSelectInput} {...props} />

SelectInput:

const options = [];

const AlbumSelectInput = ({
  input,
  ...props
}) => (
  <Select.Creatable
    {...props}
    options={props.options}
    simpleValue
    placeholder=""
    multi
    onChange={value => input.onChange(value)}
    onBlur={() => input.onBlur(input.value)}
    value={input.value}
  />
);

Initial value is never set on the select input.

If I do:

options={[
  { label: input.value, value: input.value },
  ...props.options,
]}

Then initial values is set correctly but when you type something in after it removes the previous options the user typed in because we are overwriting options on each render. This isn't correct behaviour as it should save each option to the dropdown when the user types something in.

How do I set the initial value for react-select properly without overwriting the next options like above.

[Vishal1419]

@MartinDawson did you ever got that to work?

[aeciolevy]

I am having the same problem. Did you get it working?

[MartinDawson]

Sorry, I am pretty sure I gave up in the end. I never solved it.

[sido378]

I had the same problem, as I always tried setting the value prop to the value of the option I want, ie:

const options = [
    {label: "USA", value: "USA"},
    {label: "Canada", value: "Canada"},
]
const selectedOption = "USA"

<Select value={selectedOption} ... />

When you actually have to do:

const selectedOption =  {label: "USA", value: "USA"}

To make it work.

[aeciolevy]

I solved my problem based on this issue https://github.com/JedWatson/react-select/issues/2131
@sido378 I believe MartinDawson problem was more related to initial values. However, you are right that the option should be passed as label and value in an intrinsic object

[Rudgey84]

Any chance of a code sandbox please?