Search code examples
clojurescriptreagentreagent-forms

Reagent turning span into editable field on click

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

Solution

  • 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.