Reagent turning span into editable field on click

Question

Creating a figwheel/cljs/clj application, working on the front end when the user hits a button I want to turn a span into an editable field on click using reagent, How would I go about this?

I've been reading about focus switching, and reagent/dom-node but given I have the innerHTML aka "real values" displayed on the web-page, how would I setup on-click="" to essentially move the cursor to the component outside the innerhtml (the span) and make it editable and the cursor start flashing.

Thanks guys

Not sure if you guys want a code snippet but got a widget that pretty much says the following:

{:type     :plain-icon-button
 :label    [:i.ti-pencil-alt]
 :tooltip  "Click here to edit"
 :attr     {:tab-index -1}
 :on-click (fn [] (prn "What do i do here :( ")}

thanks again guys

Answer 1

One simple solution is to have both fields present, using the CSS property display: none; to toggle them so only 1 is visible at a time. In Hiccup:

(:require
  [garden.core :as garden]
  [goog.style :as style]

[:div
  [:button#mybtn     {:display :initial}]
  [:textfield#mytf   {:display :none   }]]

and then toggle the styles using {:onclick hide-btn}

(defn install-css [css-def]
  (let [css-str (garden/css css-def)]
    (style/installStyles css-str)
    css-str))

(defn hide-btn []
  (install-css [:#mybtn {:display :none   }] )
  (install-css [:#mytf  {:display :initial}] ))

You can also experiment with the CSS visible property.

Answer 2

Create a local reagent atom and then render either the clickable div or the input element based on the state of that ratom.

(defn click-me
  []
  (let [clicked (reagent/atom false)]
    (fn []
      (if @clicked
        [:input {:type "text"
                 :auto-focus true
                 :on-blur #(reset! clicked false)}]
        [:div {:on-click #(reset! clicked true)}
         "Click me."]))))

You'll probably want to add an on-click to the :input, which will submit the data and then set clicked to false again.