reagent 2020-10-22 | Slack Archive

Ronny Li12:10:32

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]))

ferossgp13:10:48

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

ferossgp13:10:35

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

🙏 3

Ronny Li14:10:24

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

2020-10-22

Channels