[Reagent] controlled input problem with react-select

63 views

Skip to first unread message

JB Seo

unread,

Apr 29, 2020, 1:03:26 PM4/29/20

to ClojureScript

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

"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.