From c04f543ea8aa45a22507af8669a7f2dd0b887d4a Mon Sep 17 00:00:00 2001 From: madvas Date: Tue, 4 Oct 2016 12:11:16 +0200 Subject: [PATCH] Fix Caret moves to the end when editing a TextArea in reagent #17 --- README.md | 16 +--------------- project.clj | 2 +- src/cljs_react_material_ui/reagent.cljs | 10 +++++++++- 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/README.md b/README.md index e397d4e..c699cf2 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Current Material-UI version: `0.15.4` https://github.com/madvas/cljs-react-material-ui-example ## Installation -- Add `[cljs-react-material-ui "0.2.22"]` to your dependencies +- Add `[cljs-react-material-ui "0.2.23"]` to your dependencies - Exclude `cljsjs/react` from Om or other React library. This is because currently material-ui has to be built together with react to get [onTouchTap](http://www.material-ui.com/#/get-started/installation) event [working](http://stackoverflow.com/questions/29881439/react-tap-events-and-material-ui). This will not be needed in future. for example: `[org.omcljs/om "1.0.0-alpha34" :exclusions [cljsjs/react]]` @@ -129,18 +129,4 @@ Works with `reagent "0.6.0-alpha"` and up. So dependency may be sth like this [:div (rui/paper {} "Ima paper")]))])) -``` - -## Troubleshooting -##### Caret moves to the end when editing a text field -This happens due to async rendering of clojurescript react libraries. -Luckily, there is a workaround, which fixes most of use cases: Instead of `:value` prop use `:default-value` e.g: -``` -(defn simple-text-field [text] - (let [text-state (r/atom text)] - (fn [] - [rui/text-field - {:id "example" - :default-value @text-state - :on-change (fn [e] (reset! text-state (.. e -target -value)))}]))) ``` \ No newline at end of file diff --git a/project.clj b/project.clj index b1101ce..12be8f8 100644 --- a/project.clj +++ b/project.clj @@ -1,4 +1,4 @@ -(defproject cljs-react-material-ui "0.2.22" +(defproject cljs-react-material-ui "0.2.23" :description "Iterop library for material-ui.com" :url "https://github.com/madvas/cljs-react-material-ui" :license {:name "Eclipse Public License" diff --git a/src/cljs_react_material_ui/reagent.cljs b/src/cljs_react_material_ui/reagent.cljs index 25aa224..8835fdc 100644 --- a/src/cljs_react_material_ui/reagent.cljs +++ b/src/cljs_react_material_ui/reagent.cljs @@ -1,6 +1,14 @@ (ns cljs-react-material-ui.reagent (:refer-clojure :exclude [list stepper]) - (:require [reagent.core :as r])) + (:require [reagent.core :as r] + [reagent.impl.template] + [reagent.interop :refer-macros [$ $!]])) + +(set! reagent.impl.template/input-component? + (fn [x] + (or (= x "input") + (= x "textarea") + (= (reagent.interop/$ x :name) "TextField")))) (def app-bar (r/adapt-react-class (aget js/MaterialUI "AppBar"))) (def auto-complete (r/adapt-react-class (aget js/MaterialUI "AutoComplete")))