reagent-project/reagent-forms

:list field, fake placeholder and empty value

Open

#109 opened on 2016年7月4日

GitHub で見る
 (3 comments) (0 reactions) (0 assignees)HTML (337 stars) (78 forks)batch import
enhancementhelp wanted

説明

Hello,

I would like to have the possibility to add a fake placeholder to select lists.

I found this : http://stackoverflow.com/questions/5805059/how-do-i-make-a-placeholder-for-a-select-box

So with reagent 0.5.1 and reagent-forms 0.5.22, this was working :

[:div
 [:select {:field :list :id :countries}
  (->> data ;; [{:value "germany" :text "Germany"} {...} ...]
       (map #(do [:option {:key (-> % :value)}
                  (:text %)]))
       doall
       (into [[:option {:key nil
                        :disabled true
                        :hidden true}
               "Select a country"]]) ;; Placeholder text
       seq)]]

But React/Reagent was throwing a warning: Warning: Every element in a seq should have a unique :key : ([:option {:key nil, :disabled true, :hidden true}...

After upgrading to reagent 0.6.0-rc, this doesn't work anymore. The first value of the sequence is displayed by default, no fake placeholder, and the value of the ratom (:countries here) is not selected when provided.

I tried this and removed the warning but it didn't work better as a bound form (with [bind-fields ... ...]):

[:div
 [:select {:field :list :id :countries}
  [:option {:key "placeholder-da39a3ee5e6b4b0d3255bfef95601890afd80709"
            :value nil
            :disabled true
            :hidden true}
   "Select a country"]
  (->> data
       (map #(do [:option {:key (-> % :value)}
                  (:text %)]))
       doall)]]

Is having the "key" attribute used for the React key and for the value a good thing? Here I really want and empty value so that null is returned to the API.

Thanks

コントリビューターガイド