reagent

A minimalistic ClojureScript interface to React.js http://reagent-project.github.io/
Ronny Li 2020-10-22T12:51:32.081800Z

Hi everyone, I'm trying to make an input field that switches classes depending on whether it's focused or blurred. In the simple example below I noticed that the focused value never changes despite the on-click handler. Any advice would be appreciated!

(defn editable-field [config]
      (t/let-spy [is-focused (r/atom false)
                  set-focused #(reset! is-focused true)
                  set-blurred #(reset! is-focused false)
                  focused (if @is-focused "input-focused" "input-blurred")
                  editable-config (merge config
                                         {:on-click set-focused
                                          :on-blur set-blurred})]
                 [:div
                  [:input editable-config]
                  focused]))

ferossgp 2020-10-22T13:10:48.082Z

For catching focus you need to use :on-focus as you might enter input by many ways.

ferossgp 2020-10-22T13:11:35.082200Z

But the problem is that your atom is redefined on render, you need to use form-2 component here. https://purelyfunctional.tv/guide/reagent/#form-2

1🙏
Ronny Li 2020-10-22T14:17:24.082700Z

Thank you! To get my example to work I also had to remove the focused variable (defined in let). When I simply accessed (if @is-focused "input-focused" "input-blurred") directly then everything updates as expected but assigning the result to a variable doesn't work