Proper way of clearing text-inputs

[Alexander Schneider]

Hi,

ist there some idiomatic way with fork to reset inputs on submit?

For Example: When a text-input is submitted, I want to reset it to the placeholder state, where its value is empty. I could do that in a roundabout way with cljs, but maybe there is a fork way of doing it.

[Lucio D'Alessandro]

There's a reset handler you can get from the props. On submit, you can do:

(reset {:values your-initial-values-map})

This will clear the current state and reset it as if the component was being just mounted. :)
Also, the placeholders should be displayed in case the values are not initiated.

The best place to do that might be in your on-submit handler:

[fork/form {:form-id "form"
            :initial-values initial-values
            :on-submit your-submit-fn}
 (fn [{:keys [form-id
              reset
              values
              handle-change
              handle-blur
              handle-submit] :as props}]
   [:form
    {:id form-id
     :on-submit #(do (handle-submit %)
                     (reset {:values initial-values}))}
    [:input
     {:name "foo"
      :value (values "foo)
      :on-change handle-change
      :on-blur handle-blur}]
    [:button.button
     {:type "submit"}
     "Submit"]])]

[Alexander Schneider]

Thank you for taking a look. This does clear the state, but for some reason does not clear the shown text inside a text input field.

[Lucio D'Alessandro]

Do you mind sharing your component? :) I am interested to see why the values do not disappear.

[Alexander Schneider]

Sure thing :)

(defn single-input
  [{:keys [form-id
           values
           reset
           handle-change
           handle-blur
           handle-submit]}]
  [:form {:id form-id
          :on-submit #(do
                        (handle-submit %)
                        (reset {:values values}))}
   [:input
    {:name "name"
     :id (str form-id "_input")
     :placeholder (values "placeholder")
     :on-change handle-change
     :on-blur handle-blur}]
   [:br]
   [:button
    {:type "submit"}
    (values "submit")]])


(defn add-friends-form []
  [fork/form {:initial-values
              {"placeholder" "Friends Name"
               "name" "name"
               "submit" "Add Friend"}
              :prevent-default? true
              :clean-on-unmount? true
              :validation forms/single-input-validator
              :on-submit #(rf/dispatch [:add-friend (get (:values %) "name")])}
   forms/single-input])

[Lucio D'Alessandro]

Here is your desired working version:

(defn single-input
  [{:keys [form-id
           values
           reset
           handle-change
           handle-blur
           handle-submit]
    {:keys [placeholder-txt
            submit-txt]} :props}]
  [:form {:id form-id
          :on-submit #(do
                        (handle-submit %)
                        (reset))}
   [:input
    {:name "name"
     :id (str form-id "_input")
     :value (get values "name")
     :placeholder placeholder-txt
     :on-change handle-change
     :on-blur handle-blur}]
   [:br]
   [:button
    {:type "submit"}
    submit-txt]])

(defn add-friends-form []
  [fork/form {:props {:placeholder-txt "Friend name"
                      :submit-txt "Add Friend"}
              :prevent-default? true
              :clean-on-unmount? true
              :validation forms/single-input-validator
              :on-submit #(rf/dispatch [:add-friend (get (:values %) "name")])}
   single-input])

Some notes:

• Add a :value attribute to your input
• If you don't want to hardcode the placeholder and submit texts, move them as I did under a :props key, which is meant for extra args not related to the inner logic of your form. In fact, :initial-values should be only used for the actual input values :)
• As you don't want to reset to any initial values, just run (reset) to clear everything

[Alexander Schneider]

Wow, amazing. Thank you for the support. Appreciate that you took the time to help me.