[Reagent] Controlled input problem with react-select

Skip to first unread message

JB Seo

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
   (fn [props]
      {: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
    {:components components
     :inputValue input-value
     :onInputChange on-input-change
     :isMulti true
     :options []})))

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

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


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
0 new messages