day8 / re-com

A ClojureScript library of reusable components for Reagent
https://re-com.day8.com.au
MIT License
797 stars 147 forks source link

Re-com Typeahead subscription value blanks out #144

Closed nrakochy closed 7 years ago

nrakochy commented 7 years ago

I am on re-com "2.0.0"

I have a subscription that loads a small bit of form data, and a renderer that combines data with form configuration.

On initial render, this code correctly assigns the value to the model. On-change, this code correctly assigns the value to the model. However, when I change another field input, this model blanks out, even though it logs the correct value to the console.

The js/log is the part that I don't understand. Value is logged to the console correctly, but the input field model renders blank. Any insight would be greatly appreciated.

(defn input [{:keys [handler options value] :as input-config}]
  (let [opts (filter-options options)]
    (js/console.log ":VALUE" value)
    [typeahead
     :model value
     :change-on-blur? true
     :on-change handler
     :data-source opts
     :width util/one-hundred-percent]))
nrakochy commented 7 years ago

A bit more code. Here is the orginal code-

(defn input [{:keys [handler options value] :as input-config}]
  (let [opts (filter-options options)]
    (js/console.log ":VALUE" value)
    [typeahead
     :model value
     :change-on-blur? true
     :on-change handler
     :data-source opts
     :width util/one-hundred-percent]))

Here is the code that calls it -

 (defmethod input-render :typeahead [type {:keys [id label errors] :as input-config}]
     [:div.form-group {:class (set-form-group-error-class errors)}
      [:label.control-label.col-sm-3 {:for id} label]
       [:div.col-sm-9
       [typeahead/input input-config]
       [set-error-msg errors]]])

Here is the value assigned to input configuration, which happens before the multimethod -

(defn set-value [data-map {:keys [name] :as config-map}]
  (let [value (get data-map name "TEST_DATA")]
    (assoc config-map :value value)))

Dropping the value into an atom does not fix it -

(defn input [{:keys [handler options value] :as input-config}]
  (let [opts (filter-options options)
         v (atom value)]
    (js/console.log ":VALUE" v)
     [typeahead
      :model v
      :change-on-blur? true
      :on-change handler
      :data-source opts
      :width util/one-hundred-percent]))

util/one-hundred-percent is a string "100%" on-change uses a re-frame dispatcher to update the value in app-db, which holds the current value of the field.

nrakochy commented 7 years ago

Making it a re-frame form-2 component seems to have solved it.

(defn input [{:keys [handler options value] :as input-config}]
  (let [opts (filter-options options)
         v (atom value)]
(fn [{:keys [handler] :as input-config}]
     [typeahead
      :model v
      :change-on-blur? true
      :on-change handler
      :data-source opts
      :width util/one-hundred-percent]))