debounced_field.cljs

(defn dispatch-later! [event debounce-delay timeout-atom]
  (when-let [t @timeout-atom] (js/clearTimeout t))
  (reset! timeout-atom (js/setTimeout (fn [] (rf/dispatch event)) debounce-delay)))

(defn text-field [_]
  (let [content-atom (r/atom nil)]
    (fn [{:keys [id display-value required help label area error-msg enabled debounce]
          :or   {debounce 300}
          :as   f}]
      (let [timeout (atom nil)
            attr    (merge
                     (when (= false enabled)
                       {:disabled "true"})
                     (when required
                       {:style {:background warning}})
                     {:id           (util/qualified-string id)
                      :value        (or @content-atom display-value)
                      :on-blur      (fn [_] (reset! content-atom nil))
                      :on-change    (fn [e]
                                      (let [content (.-value (.-target e))]
                                        (reset! content-atom content)
                                        (dispatch-later! [::field-changed {:field f :value content}]
                                                         debounce timeout)))})]
        [sui/form-field
         (when label [:label label (when help (help-icon help))])
         (if area
           [:text-area (merge {:rows 5} attr)]
           [:input attr])
         (when error-msg
           [:div.ui.pointing.red.basic.label error-msg])]))))