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]))
For catching focus you need to use :on-focus
as you might enter input by many ways.
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
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