index.cljs.hl

(page "index.html")

(defc db (sorted-map))

(defn append-item!
  [txt]
  (swap! db assoc (gensym) txt))

(cell= (println (pr-str db)))

(defn edit-item!
  [id txt]
  (swap! db assoc id txt))

(defn delete-item!
  [id]
  (swap! db dissoc id))

(html
  (head
    (title "loop-tpl bug demo")
    (link :href "app.css" :rel "stylesheet"))
  (body
    (h3 "Problem description")
    (p "The system below demonstrates a weird bug that seems to be related to loop-tpl.")
    (h3 "Steps to reproduce")
    (ol
      (li "Create several one-character items.")
      (li "Set your cursor at the end of the text in one of the items and press Backspace.")
      (li "You will see the item deleted from the database, but the input itself - which persists, as it's managed by loop-tpl - remains empty.  We expected it to show the value of one of the remaining items."))
    (p "The problem also shows up, even with input texts longer than a single character, if one selects all of the text in an input and deletes it at once.")
    (p "The problem doesn't seem to show up with item texts with an initial size larger than one.")
    (a :href "https://gist.github.com/alandipert/2dc07f8fb53bda7cabd4150e988d894f" "Code for this page.")
    (h3 "Item database")
    (textarea :cols "80" :rows "10" :disabled "true" (cell= (pr-str db)))
    (h3 "Add an item")
    (let [new-item (cell "")]
      (div
        (form :submit #(dosync
                         (append-item! @new-item)
                         (reset! new-item ""))
              (input
                :value new-item
                :type "text"
                :keyup #(reset! new-item @%))
              (button "Add"))))
    (h3 "See and edit items")
    (ol
      (loop-tpl
        :bindings [[id txt] db]
        (li
          (span
            (with-let [e (input :keyup #(if (empty? @%)
                                          (delete-item! @id)
                                          (edit-item! @id @%)))]
              (do-watch (cell= [id txt])
                (fn [_ [_ txt]]
                  (.val (js/jQuery e) txt))))))))))