[Reagent] Controlled input problem with react-select

16 views
Skip to first unread message

JB Seo

unread,
Apr 29, 2020, 1:03:37 PM4/29/20
to ClojureScript
Reagent works well with most JS react library unless a JS react library uses controlled input in it.


The above page shows detailed description of this problem.

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


```
(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?
Reply all
Reply to author
Forward
0 new messages