Devcards 0.2.0-3 & Reagent 0.5.1 issue: Input box loses focus when typing if atom passed to card

core.cljs

(ns devcards-react-test.core
  (:require
   [reagent.core :as reagent]
   [sablono.core :as sab :include-macros true])
  (:require-macros
   [devcards.core :as dc :refer [defcard deftest]]))

;; --------------------------------------------------
;; This replaces the core.cljs from devcards-template
;; Make sure to add [reagent "0.5.1"] to project.clj
;; --------------------------------------------------

(enable-console-print!)

(defonce shared-state-atom (reagent/atom "foo"))

(defonce other-state-atom (reagent/atom "bar"))

;; Reagent code copied (with slight modification) from
;;  http://reagent-project.github.io

(defn atom-input [value]
  [:input {:type "text"
           :value @value
           :on-change #(reset! value (-> % .-target .-value))}])

(defn shared-state []
  (let [val shared-state-atom]
    (fn []
      [:div
       [:hr]
       [:p "The value is now: " @val]
       [:p "Change it here: " [atom-input val]]])))

(defcard reagent-without-atom
  "Reagent devcard that doesn't pass the atom to defcard.
   Editing this works fine."
  (dc/reagent shared-state))

(defcard reagent-with-atom
  "Reagent devcard that passes its atom to defcard.
   Editing this loses focus on each keystroke."
  (dc/reagent shared-state)
  shared-state-atom
  {:inspect-data true
   :frame true
   :history true})

(defcard reagent-with-other-atom
  "Reagent devcard that passes a different atom to defcard.
   Editing this works fine."
  (dc/reagent shared-state)
  other-state-atom
  {:inspect-data true
   :frame true
   :history true})

(defn main []
  ;; conditionally start the app based on wether the #main-app-area
  ;; node is on the page
  (if-let [node (.getElementById js/document "main-app-area")]
    (js/React.render (sab/html [:div "This is working"]) node)))

(main)

;; remember to run lein figwheel and then browse to
;; http://localhost:3449/cards.html