Merge pull request #363 from reagent-project/remove-synthetic-input

Remove synthetic-input options

CHANGELOG.md

@@ -9,6 +9,7 @@
 - Apply vector metadata to the outermost element when using nesting shorthard ([#262](https://github.com/reagent-project/reagent/issues/262))
 - Add `:<>` shorthand for [React Fragments](https://reactjs.org/docs/fragments.html) ([#352](https://github.com/reagent-project/reagent/pull/352)])
 - Fix `:class` property with custom elements ([#322](https://github.com/reagent-project/reagent/issues/322))
+- Remove synthetic input support (added in previous alpha) ([#351](https://github.com/reagent-project/reagent/pull/351))
 
 ## 0.8.0-alpha2 (2017-10-20)
 
@@ -21,10 +22,10 @@
     - Update Cljsjs dependencies or Node packages to use React 16
 - `:class` property now supports collections of strings
   ([#154](https://github.com/reagent-project/reagent/pull/154))
-- Support for marking React components as `synthetic-input`, which will fix
+- ~~Support for marking React components as `synthetic-input`, which will fix
   problems with cursor jumping around
-  ([#282](https://github.com/reagent-project/reagent/pull/282))
+  ([#282](https://github.com/reagent-project/reagent/pull/282))~~
-    - Helps with e.g. Material-UI TextField
+    - This was reverted due to not working for all use cases ([#351](https://github.com/reagent-project/reagent/pull/351))
 - Added `IWithMeta` to `RAtom` ([#314](https://github.com/reagent-project/reagent/pull/314))
 
 ## 0.8.0-alpha1 (2017-07-31)

src/reagent/core.cljs

@@ -50,11 +50,9 @@
 (defn adapt-react-class
   "Returns an adapter for a native React class, that may be used
   just like a Reagent component function or class in Hiccup forms."
-  ([c opts]
+  [c]
-   (assert-some c "Component")
+  (assert-some c "Component")
-   (tmpl/adapt-react-class c opts))
+  (tmpl/adapt-react-class c))
-  ([c]
-   (adapt-react-class c {})))
 
 (defn reactify-component
   "Returns an adapter for a Reagent component, that may be used from

src/reagent/impl/template.cljs

@@ -211,12 +211,10 @@
     ($! this :cljsInputDirty false)
     (let [rendered-value ($ this :cljsRenderedValue)
           dom-value ($ this :cljsDOMValue)
-          node (find-dom-node this) ;; Default to the root node within this component
+          ;; Default to the root node within this component
-          synthetic-on-update ($ this :cljsSyntheticOnUpdate)]
+          node (find-dom-node this)]
       (when (not= rendered-value dom-value)
-        (if (fn? synthetic-on-update)
+        (input-node-set-value node rendered-value dom-value this {})))))
-          (synthetic-on-update input-node-set-value node rendered-value dom-value this)
-          (input-node-set-value node rendered-value dom-value this {}))))))
 
 (defn input-handle-change [this on-change e]
   ($! this :cljsDOMValue (-> e .-target .-value))
@@ -228,34 +226,26 @@
   (on-change e))
 
 (defn input-render-setup
-  ([this jsprops {:keys [synthetic-on-update synthetic-on-change]}]
+  [this jsprops]
-   ;; Don't rely on React for updating "controlled inputs", since it
+  ;; Don't rely on React for updating "controlled inputs", since it
-   ;; doesn't play well with async rendering (misses keystrokes).
+  ;; doesn't play well with async rendering (misses keystrokes).
-   (when (and (some? jsprops)
+  (when (and (some? jsprops)
-           (.hasOwnProperty jsprops "onChange")
+             (.hasOwnProperty jsprops "onChange")
-           (.hasOwnProperty jsprops "value"))
+             (.hasOwnProperty jsprops "value"))
-     (assert find-dom-node
+    (assert find-dom-node
-       "reagent.dom needs to be loaded for controlled input to work")
+            "reagent.dom needs to be loaded for controlled input to work")
-     (when synthetic-on-update
+    (let [v ($ jsprops :value)
-       ;; Pass along any synthetic input setter given
+          value (if (nil? v) "" v)
-       ($! this :cljsSyntheticOnUpdate synthetic-on-update))
+          on-change ($ jsprops :onChange)]
-     (let [v ($ jsprops :value)
+      (when-not ($ this :cljsInputLive)
-           value (if (nil? v) "" v)
+        ;; set initial value
-           on-change ($ jsprops :onChange)
+        ($! this :cljsInputLive true)
-           on-change (if synthetic-on-change
+        ($! this :cljsDOMValue value))
-                       (partial synthetic-on-change on-change)
+      ($! this :cljsRenderedValue value)
-                       on-change)]
+      (js-delete jsprops "value")
-       (when-not ($ this :cljsInputLive)
+      (doto jsprops
-         ;; set initial value
+        ($! :defaultValue value)
-         ($! this :cljsInputLive true)
+        ($! :onChange #(input-handle-change this on-change %))))))
-         ($! this :cljsDOMValue value))
-       ($! this :cljsRenderedValue value)
-       (js-delete jsprops "value")
-       (doto jsprops
-         ($! :defaultValue value)
-         ($! :onChange #(input-handle-change this on-change %))))))
-  ([this jsprops]
-   (input-render-setup this jsprops {})))
 
 (defn input-unmount [this]
   ($! this :cljsInputLive nil))
@@ -267,8 +257,6 @@
 
 (def reagent-input-class nil)
 
-(def reagent-synthetic-input-class nil)
-
 (declare make-element)
 
 (def input-spec
@@ -281,31 +269,12 @@
        (input-render-setup this jsprops)
        (make-element argv comp jsprops first-child)))})
 
-(def synthetic-input-spec
-  ;; Same as `input-spec` except it takes another argument for `input-setter`
-  {:display-name "ReagentSyntheticInput"
-   :component-did-update input-component-set-value
-   :component-will-unmount input-unmount
-   :reagent-render
-   (fn [on-update on-change argv comp jsprops first-child]
-     (let [this comp/*current-component*]
-       (input-render-setup this jsprops {:synthetic-on-update on-update
-                                         :synthetic-on-change on-change})
-       (make-element argv comp jsprops first-child)))})
-
-
 (defn reagent-input
   []
   (when (nil? reagent-input-class)
     (set! reagent-input-class (comp/create-class input-spec)))
   reagent-input-class)
 
-(defn reagent-synthetic-input
-  []
-  (when (nil? reagent-synthetic-input-class)
-    (set! reagent-synthetic-input-class (comp/create-class synthetic-input-spec)))
-  reagent-synthetic-input-class)
-
 
 ;;; Conversion from Hiccup forms
 
@@ -354,38 +323,11 @@
     (make-element argv react/Fragment jsprops first-child)))
 
 (defn adapt-react-class
-  ([c {:keys [synthetic-input]}]
+  [c]
-   (let [on-update (:on-update synthetic-input)
+  (doto (->NativeWrapper)
-         on-change (:on-change synthetic-input)]
+    ($! :name c)
-     (when synthetic-input
+    ($! :id nil)
-       (assert (fn? on-update))
+    ($! :class nil)))
-       (assert (fn? on-change)))
-     (let [wrapped (doto (->NativeWrapper)
-                     ($! :name c)
-                     ($! :id nil)
-                     ($! :class nil))
-           wrapped (if synthetic-input
-                     (doto wrapped
-                       ($! :syntheticInput true))
-                     wrapped)
-           wrapped (if synthetic-input
-                     (doto wrapped
-                       ($! :syntheticOnChange on-change))
-                     wrapped)
-           wrapped (if synthetic-input
-                     ;; This is a synthetic input component, i.e. it has a complex
-                     ;; nesting of elements such that the root node is not necessarily
-                     ;; the <input> tag we need to control, and/or it needs to execute
-                     ;; custom code when updated values are written so we provide an affordance
-                     ;; to configure a setter fn that can choose a different DOM node
-                     ;; than the root node if it wants, and can supply a function hooked
-                     ;; to value updates so it can maintain its own component state as needed.
-                     (doto wrapped
-                       ($! :syntheticOnUpdate on-update))
-                     wrapped)]
-       wrapped)))
-  ([c]
-   (adapt-react-class c {})))
 
 (def tag-name-cache #js{})
 
@@ -395,24 +337,13 @@
     (aset tag-name-cache x (parse-tag x))))
 
 (defn native-element [parsed argv first]
-  (let [comp ($ parsed :name)
+  (let [comp ($ parsed :name)]
-        synthetic-input ($ parsed :syntheticInput)]
     (let [props (nth argv first nil)
           hasprops (or (nil? props) (map? props))
           jsprops (convert-props (if hasprops props) parsed)
           first-child (+ first (if hasprops 1 0))]
-      (if (or synthetic-input (input-component? comp))
+      (if (input-component? comp)
-        (-> (if synthetic-input
+        (-> [(reagent-input) argv comp jsprops first-child]
-              ;; If we are dealing with a synthetic input, use the synthetic-input-spec form:
-              [(reagent-synthetic-input)
-               ($ parsed :syntheticOnUpdate)
-               ($ parsed :syntheticOnChange)
-               argv
-               comp
-               jsprops
-               first-child]
-              ;; Else use the regular input-spec form:
-              [(reagent-input) argv comp jsprops first-child])
             (with-meta (meta argv))
             as-element)
         (let [key (-> (meta argv) get-key)