Add preliminary support for composition based input methods

src/cljs/realworld/ui/components/pure/form_inputs.cljs

@@ -1,6 +1,39 @@
 (ns realworld.ui.components.pure.form-inputs
   (:require [keechma.toolbox.forms.helpers :as forms-helpers]
-            [realworld.forms.validators :as validators]))
+            [realworld.forms.validators :as validators]
+            [reagent.core :as r]))
+
+(defn make-input-with-composition-support [tag]
+  (fn [props]
+    (let [el-ref-atom (atom nil)
+          composition-atom? (atom false)]
+      (r/create-class
+       {:reagent-render (fn [props]
+                          (let [props-ref  (or (:ref props) identity)
+                                props-on-change (or (:on-change props) identity)
+                                props-value (:value props)
+                                props-without-value (dissoc props :value)]
+                            [tag (merge props-without-value
+                                        {:on-change (fn [e]
+                                                      (when-not @composition-atom?
+                                                        (props-on-change e)))
+                                         :on-composition-start #(reset! composition-atom? true)
+                                         :on-composition-update #(reset! composition-atom? true)
+                                         :on-composition-end (fn [e]
+                                                               (reset! composition-atom? false)
+                                                               (props-on-change e))
+                                         :default-value props-value
+                                         :ref (fn [el]
+                                                (reset! el-ref-atom el)
+                                                (props-ref el))})]))
+        :component-will-update (fn [comp [_ new-props _]]
+                                 (let [el @el-ref-atom
+                                       composition? @composition-atom?]
+                                   (when (and el (not composition?))
+                                     (set! (.-value el) (or (:value new-props) "")))))}))))
+
+(def input-with-composition-support (make-input-with-composition-support :input))
+(def textarea-with-composition-support (make-input-with-composition-support :textarea))
 
 (defn render-errors [attr-errors]
   (when-let [errors (get-in attr-errors [:$errors$ :failed])]
@@ -12,23 +45,25 @@
 (defn controlled-input [{:keys [form-state helpers placeholder label attr input-type]}]
   (let [{:keys [on-change on-blur]} helpers]
     [:fieldset.form-group
-     [:input.form-control.form-control-lg
+     [input-with-composition-support
       {:placeholder placeholder
        :on-change (on-change attr)
        :on-blur (on-blur attr)
        :type (or input-type :text)
-       :value (forms-helpers/attr-get-in form-state attr)}]
+       :value (forms-helpers/attr-get-in form-state attr)
+       :class "form-control form-control-lg"}]
      (render-errors (forms-helpers/attr-errors form-state attr))]))
 
 (defn controlled-textarea [{:keys [form-state helpers placeholder label attr rows]}]
   (let [{:keys [on-change on-blur]} helpers]
     [:fieldset.form-group
-     [:textarea.form-control.form-control-lg
+     [textarea-with-composition-support
       {:placeholder placeholder
        :rows (or rows 8)
        :on-change (on-change attr)
        :on-blur (on-blur attr)
-       :value (forms-helpers/attr-get-in form-state attr)}]
+       :value (forms-helpers/attr-get-in form-state attr)
+       :class "form-control form-control-lg"}]
      (render-errors (forms-helpers/attr-errors form-state attr))]))
 
 (defn controlled-select [{:keys [form-state helpers placeholder label attr options]}]