Editing weirdness

core.cljs

(ns om-tut.core
  (:require [om.core :as om :include-macros true]
            [om.dom :as dom :include-macros true]))

(enable-console-print!)

(def app-state (atom {:text "Works", :data [{:text "Doesn't"}]}))

(defn handle-change
  [e data edit-key owner]
  (om/update! data edit-key (.. e -target -value)))

(defn commit-change
  [owner]
  (om/set-state! owner :editing false))

(defn editable
  [data owner {:keys [edit-key]}]
  (reify
    om/IInitState
    (init-state [_] {:editing false})
    om/IRenderState
    (render-state [_ {:keys [editing]}]
      (let [text (get data edit-key)]
        (dom/p nil
          (if editing
            (dom/input
               #js {:value (om/value text)
                    :onChange #(handle-change % data edit-key owner)
                    :onKeyPress #(when (== (.-keyCode %) 13)
                                   (commit-change owner))
                    :onBlur (fn [e] (commit-change owner))})
            (dom/span nil
              (om/value text)
              (dom/button
                #js {:onClick #(om/set-state! owner :editing true)}
                "Edit"))))))))

(defn lister
  [root owner]
  (apply dom/div nil
    (om/build-all editable (:data root) {:opts {:edit-key :text}})))

;;; Works
(om/root
  editable
  app-state
  {:target (. js/document (getElementById "app0"))
   :opts {:edit-key :text}})

;;; Doesn't
(om/root
  lister
  app-state
  {:target (. js/document (getElementById "app1"))})