Skip to content
This repository has been archived by the owner on Aug 23, 2022. It is now read-only.

Control.select doesn't put default selection into state until changed. #458

Closed
yourfavorite opened this issue Oct 9, 2016 · 12 comments
Closed

Comments

@yourfavorite
Copy link

yourfavorite commented Oct 9, 2016

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.

@yourfavorite yourfavorite changed the title Control.select doesn't put selection into state until changed. Control.select doesn't put default selection into state until changed. Oct 9, 2016
@davidkpiano
Copy link
Owner

davidkpiano commented Oct 9, 2016

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:

  • defaultValue works as expected (though this should be avoided)
  • <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
Copy link

ramiel commented Oct 14, 2016

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
Copy link
Owner

davidkpiano commented Oct 14, 2016

@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
Copy link

ramiel commented Oct 14, 2016

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
Copy link
Owner

@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
Copy link

ramiel commented Oct 14, 2016

So, should this work?

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

@davidkpiano
Copy link
Owner

Yes, defaultValue works.

@ramiel
Copy link

ramiel commented Oct 14, 2016

Ok, thank you, I'll try

@ramiel
Copy link

ramiel commented Oct 20, 2016

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

@davidkpiano
Copy link
Owner

@ramiel Can you open a separate ticket for that?

@ramiel
Copy link

ramiel commented Oct 20, 2016

Of course

@dilipagheda
Copy link

@davidkpiano I am getting same issue as @ramiel

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants