Reagent works well with most JS react library unless a JS react library 
uses controlled input in it.

https://github.com/reagent-project/reagent/blob/master/doc/ControlledInputs.md#controlled-inputs

The above page shows detailed description of this problem.

I tried the similar fixes for react-select without success.

react-select also enables users customize input component: 
https://github.com/JedWatson/react-select/blob/master/packages/react-select/src/Select.js#L1417
(It is same as those of material-ui, though: 
https://github.com/mui-org/material-ui/blob/65c18e1cfecdf491f228022b49ecaa2d67de339b/packages/material-ui/src/InputBase/InputBase.js#L359
)

```
(ns example.core
  (:require [reagent.core :as r]
            [reagent.dom :as rdom]
            ["react-select/creatable" :default CreatableSelect]
            [reagent.impl.template :as rtpl]))

(set! *warn-on-infer* true)

(defonce text-state (r/atom "foobar"))

(def ^:private input
  (r/reactify-component
   (fn [props]
     [:input
      {:ref (:innerRef props)
       :type (:type props)
       :value (:value props)
       :style {:height 40}
       :on-change (:onChange props)}])))

(def ^:private components
  {:Input input})

(defn creatable-select [{:keys [input-value
                                on-input-change]}]
  (r/create-element
   CreatableSelect
   (rtpl/convert-prop-value
    {:components components
     :inputValue input-value
     :onInputChange on-input-change
     :isMulti true
     :options []})))

(defn main []
  [:div
   [:div
    [:div
    "text-state:"
     @text-state]
    [:div
     "Just adapt1"
     [:> CreatableSelect
      {:is-multi true
       :options []}]]]
   [:div
    "Provide input component"
    [creatable-select
     {:input-value @text-state
      :on-input-change (fn [new-input]
                         (reset! text-state new-input))}]]])

(defn start []
  (rdom/render [main] (js/document.getElementById "app")))

(start)
```

My try works well with alphabet and numbers, but it does not work well with 
CJK languages.

Is there anyone who succeeded interacting with react-select?

-- 
Note that posts from new members are moderated - please be patient with your 
first post.
--- 
You received this message because you are subscribed to the Google Groups 
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to clojurescript+unsubscr...@googlegroups.com.
To view this discussion on the web visit 
https://groups.google.com/d/msgid/clojurescript/c310e895-154f-456d-99a4-b244a1e7d46b%40googlegroups.com.

Reply via email to