React-redux-form: Control.select doesn't put default selection into state until changed.

[yourfavorite]

I have the following

<Control.select model=".type">
  <option value="listing">Listing</option>
  <option value="product">Product</option>
</Control.select>

If I change this field, the value gets added to the state appropriately. However if I leave the field alone because the default value of Listing is correct, then the state will be missing the .type value. Is there a step I should take to make sure the value of select inputs gets added to the state by default? I have tried adding defaultValue but that doesn't have any effect.

[davidkpiano]

It might be a bug that defaultValue does not initially load the value, though ideally you would have this default value as part of the initial state in your model reducer (or in combineForms). RRF does not assume that the first <option> is the default value, and I don't believe the W3 spec does either - it assumes that <option selected> is the default. Ideally, you'd have a select that looks like this:

<select>
  <option value="" selected disabled>Choose here</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

So I'll check on two things:

• [x] defaultValue works as expected (though this should be avoided)
• [x] <option selected> explicitly specified works as expected _as the default value_
  
  
  
  • having an initial value for the select's model in the store would override this
  
  

[ramiel]

In react you can simply assign a value to the select element and this will set the according option, as explained here. Will this way work also on RRF?

[davidkpiano]

@ramiel Yes, setting <select value="something"> will work. Remember that setting it to a static value doesn't allow it to be changed, however (in anything, not just RRF. That's how React works, see controlled components).

[ramiel]

Yes but looks like <Control.select model=".name" value="defaultName">...</Control.select> doesn't work the same way. Am I doing something wrong? I'll try to put an example somewhere to see if it is reproducible.

[davidkpiano]

@ramiel

<Control.select model=".name" value="defaultName">...</Control.select>

The above code, as-is, will never allow the value of .name to be changed. See here: https://facebook.github.io/react/docs/forms.html#controlled-components

[ramiel]

So, should this work?

<Control.select model=".name" defaultValue="defaultName">...</Control.select>

[davidkpiano]

Yes, defaultValue works.

[ramiel]

Ok, thank you, I'll try

[ramiel]

If I set the defaultValue, the option is choosed but not set in the modelValue. Is an expected behavior?

[davidkpiano]

@ramiel Can you open a separate ticket for that?

[ramiel]

Of course

[dilipagheda]

@davidkpiano I am getting same issue as @ramiel