racehub/om-bootstrap

Re-drawing i/input "select" doesn't reset default-value

Closed this issue · 7 comments

I am using the input select inside of a render-state. It has a default-value of nil for the initial rendering. During the subsequent renderings the value I pass as default-value changes. However, the value is never selected in the dropdown. I would expect that during each rendering the default-value would be picked up and used.

Hey @mstang; passing :default-value without a :value gives you an uncontrolled component, as described in the "Uncontrolled Components" section here:

http://facebook.github.io/react/docs/forms.html

This is useful if you want a text field that's not tied to any particular state field. I think what you want is the :value field. The field will only change in response to the changes in value that you're passing. Does that make sense?

One use for :default-value might be to have a text field that you can type around in; then, when you click a submit button, you read the value directly using (.-textValue (om/get-node owner "text-field")).

I am not sure if I was clear. I am creating a dropdown with a list of people. I use the d/option to populate the list. It draws the list just fine. When I create the component, I don't have a selection, so I was passing in nil for the key :default-value. Is there a :selected key that I can use?

What I was using as an example was:
(i/input {:type "select" :default-value "select"}
(d/option {:value "select"} "select")
(d/option {:value "other"} "..."))

Ah! Okay, I see what you mean.

As I think you're doing, you're going to want to put the :value directly onto the i/input (of type "select") - unfortunately you can't use nil, or react treats this as an uncontrolled component. You might add a default option at the beginning of the list with an empty string.

Here's an example from a project of mine:

(i/input
  {:wrapper-classname "col-sm-2"
   :skip-form-group? true
   :type "select"
   :value ""}
   (d/option {:value ""} "Select Age Group")
   (d/option {:value "youth"} "Youth"))

yeah, just saw your example. change :default-value to :value and you should be all set.

Cool, that seems to work! Thanks!!!