Skip to content

Instantly share code, notes, and snippets.

@tggreene
Last active June 7, 2022 20:08
Show Gist options
  • Save tggreene/b63fe7483158c939a4e121073a28df39 to your computer and use it in GitHub Desktop.
Save tggreene/b63fe7483158c939a4e121073a28df39 to your computer and use it in GitHub Desktop.
Potential Workaround for reagent managed inputs
(set! (.-isInput TextInput) true)
(set! (.-isInput Textarea) true)
(set! (.-isInput TextareaAutosize) true)
(set! reagent.impl.input/input-component?
(fn ^boolean [x]
(or (contains? #{"input" "textarea"} x)
(.-isInput ^js/Object x))))
(defn controlled-react-input
[]
(let [text (r/atom "")
inner #c (react/forwardRef
(fn [props ref]
(r/as-element [:input (-> (js->clj props :keywordize-keys true)
(assoc :ref ref))])))]
(fn []
[:> ui/TextInput {:is inner
:value @text
:on-change #(reset! text (.. % -target -value))}])))
(defn text-input
[state]
(let [[input set-input] (react/useState (or (:input @state) ""))]
(react/useEffect
(fn []
(let [id (random-uuid)]
(js/console.log id)
(add-watch state
id
(fn [_ _ _ new]
(when (not= input (:input new))
(set-input (:input new)))))
(fn []
(remove-watch state id))))
#js [])
[:> ui/TextInput
{:value input
:on-change (fn [event]
(swap! state assoc :input (-> event .-target .-value))
(set-input (-> event .-target .-value)))}]))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment