[Reagent, React] value of select/option's attribute is incorrect.

[Bin Li]

I created this reagent component:

(defn duallist []
[:div.row
[:div.col-md-7
[:select {:multiple "multiple"
:size "10"
:name "duallistbox_demo"
:class "demo"
:style {:display "none"}}
[:option {:value "option1"} "Option 1"]
[:option {:value "option2" :selected "selected"} "Option 2"]
[:option {:value "option3" :selected "selected"} "Option 3"]
[:option {:value "option5"} "Option 5"]
]
]
]
)

But it reader this html code:

<select multiple="" size="10" name="duallistbox_demo2" class="demo2"
style="display: none;" data-reactid=".0.0.0">
<option value="option1" data-reactid=".0.0.0.0">Option 1</option>
<option value="option2" selected="" data-reactid=".0.0.0.1">Option 2
</option>
<option value="option3" selected="" data-reactid=".0.0.0.2">Option 3
</option>
<option value="option5" data-reactid=".0.0.0.3">Option 5</option>
</select>


The attribute multiple="" and selected="" , their values are not as expected.

Any ideas?

Thanks in advance!

[vve...@gmail.com]

As per spec they are correct http://www.w3.org/html/wg/drafts/html/master/infrastructure.html#boolean-attributes

"If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace."

[Francis Avila]

Generally the React elements mirror dom objects rather than html tags and attributes.

For example, :multiple and :selected are booleans, not strings.


Also, the select element has a value property you can set directly instead of messing with :selected. https://facebook.github.io/react/docs/forms.html#why-select-value

Code should be more like:

(defn duallist []
[:div.row
[:div.col-md-7
[:select {:multiple true
:value ["option2" "option3"]

:size "10"
:name "duallistbox_demo"
:class "demo"
:style {:display "none"}}
[:option {:value "option1"} "Option 1"]

[:option {:value "option2"} "Option 2"]
[:option {:value "option3"} "Option 3"]

[:option {:value "option5"} "Option 5"]
]
]
]
)

[Bin Li]

Thanks! this really help!