Should select elements be wrapped with wrap-form-element

[caleb]

Hi,

I'm working on an app that uses select boxes and I noticed that on Safari when you select an item from a select box it momentarily flashes a different value before showing the selected value.

I looked at the DOM helper code and noticed that input, textarea, and option are wrapped to prevent this type of behavior.

When I wrap my own select component with the wrap-form-element function the flashing goes away.

Here's an example video (I tried making a gif, but the low framerate hid the problem):

https://dl.dropboxusercontent.com/u/473648/flickering-select.mp4

The select on the right uses the default dom/select component, and the select on the left uses my wrapped one.

Here's the code for those two select boxes:

(def my-select
  (dom/wrap-form-element js/React.DOM.select "select"))
…
           (my-select #js {:onChange #(om/set-state! this {:value (.. % -target -value)})
                                               :value (om/get-state this :value)}
                                          (dom/option #js {:value nil} "------")
                                          (dom/option #js {:value 1} "One")
                                          (dom/option #js {:value 2} "Two")
                                          (dom/option #js {:value 3} "Three")
                                          (dom/option #js {:value 4} "Four"))

           (dom/select #js {:onChange #(om/set-state! this {:value (.. % -target -value)})
                            :value (om/get-state this :value)}
                       (dom/option #js {:value nil} "------")
                       (dom/option #js {:value 1} "One")
                       (dom/option #js {:value 2} "Two")
                       (dom/option #js {:value 3} "Three")
                       (dom/option #js {:value 4} "Four"))

Thanks!

[swannodette]

fixed 7c1a337