Last active
June 7, 2022 20:08
-
-
Save tggreene/b63fe7483158c939a4e121073a28df39 to your computer and use it in GitHub Desktop.
Potential Workaround for reagent managed inputs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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)))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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))}]))) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(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