Unable to set disabled option as defaultValue for select element

What is the current behavior?

I want to render a selectbox including a disabled option, which should be selected by default. Currently, my code looks pretty much like this:

<select name='country' defaultValue='no-value'>
    <option value='no-value' disabled>Please select</option>
    <option value='o1'>Option 1</option>
    <option value='o2'>Option 2</option>
    <option value='o3'>Option 3</option>
</select>

When only using react, everything is like expected: The selectbox is rendered, with the option “Please select” as default value. Here is a codepen including this example

However, as soon as I include redux-form, I’m unable to set a disabled option as defaultValue. It has to either, not be disabled, or not beeing a redux form. I’ve also tried using the initialValues, but they seem to ignored on select elements?

What is the expected behavior?

Form / Selectbox should get rendered having the disabled option selected by default.

What’s your environment?

Chrome: 52.0.2743 @ Linux React: 15.3.2 Redux-Form: 6.1.1

[gustavohenke]

It works if you do the following: https://jsfiddle.net/7teq3f04/

If you don’t use initialValues, then the behavior is really strange. It changes to the defaultValue only when you focus the select…

[fivetwelve]

I was able to get this working by adding an input property passed into the renderSelect object and then changing my select element to: <select id={id} name={name} {...input}>

I’m not really sure why the input works (my own inexperience) but it does. I’m leaving my follow-up here to hopefully help other devs that have stumbled with this like I have.

On a slightly different note, my error coming back was an object (because of how our project handles validation) so I handle it differently than in the examples by using a react-intl component: {touched && error && <div><FormattedMessage {...error} /></div>}