I ran into a similar error with losing focus. In my case it was because I was
generating a different react-id in an on-blur method. I ran your code, and
didn't see the id change. But (the reason I bring this up), I do see the same
behavior in the Chrome DOM explorer with your code as I did with mine. If you
expand all three of the nodes down to the 'input' tags, then click on a
different radio button, you'll see all the 'label' DOM elements will collapse.
This tells me the actual DOM elements in the browser are being destroyed and
recreated, which messes up the tab indexing and focus.
I think the problem is that the owner object you are updating in the on-click
is actually the parent's owner, not the child's owner. I added the owner
attribute to the child component, but then had to also pass in the state from
the parent. This correctly enable keyboard navigation, and the initial 'label2'
was selected. But you'll notice that the parent div which displays the current
selection does NOT update with new selections. I have more experience with
Reagent than with Om, so I don't remember off-hand what the correct way is to
update parent state (async channels mabye?).
My modified code is below. Hopefully that helps you get to the final solution.
-Steve
(defonce app-state
(atom
{:values ["label1" "label2" "label3"]}))
(defn checked? [value option]
(and (= value option) "checked"))
(defn form-view [data owner]
(reify
om/IInitState
(init-state [_]
{:answers {"test" "label2"}})
om/IRenderState
(render-state [this state]
(dom/div nil
(dom/div nil (get-in state [:answers "test"]) )
(apply dom/span nil
(om/build-all
(fn [option owner]
(reify
om/IRenderState
(render-state [this state]
(println "rendering")
(dom/label nil option
(dom/input #js {:checked (checked?
(get (:answers state) "test") option)
:type "radio"
:name "test"
:value option
:onChange
#(let
[new-value (-> % .-target .-value)]
(when
(js/isNaN new-value)
(om/update-state! owner :answers
(fn [xs]
(assoc xs "test" new-value)))))})))))
(:values data)
{:state state}))))))
(om/root form-view app-state
{:target (. js/document (getElementById "app"))})
On Wednesday, March 18, 2015 at 2:01:51 PM UTC-4, Elyahou Ittah wrote:
> I have issue with this simple radio button example.
>
> I want to select the value with the keyboard. But When I am navigating with
> the keyboard between the radio buttons the focus is lost... Anyone has a idea
> why ?
>
>
> (defonce app-state
> (atom
> {:values ["label1" "label2" "label3"]}))
>
> (defn checked? [value option]
> (and (= value option) "checked"))
>
> (defn form-view [data owner]
> (reify
> om/IInitState
> (init-state [_]
> {:answers {"test" "label2"}})
> om/IRenderState
> (render-state [this state]
> (apply dom/span nil
> (om/build-all
> (fn [option]
> (reify
> om/IRender
> (render [this]
> (dom/label nil option
> (dom/input #js {:checked (checked? (get (:answers state)
> "test") option)
> :type "radio"
> :name "test"
> :value option
> :onChange
> #(let [new-value (-> % .-target
> .-value)]
> (when (js/isNaN new-value)
> (om/update-state! owner :answers
> (fn [xs]
> (assoc xs "test"
> new-value)))))})))))
> (:values data))))))
>
>
>
> (om/root form-view app-state
> {:target (. js/document (getElementById "test"))})
--
Note that posts from new members are moderated - please be patient with your
first post.
---
You received this message because you are subscribed to the Google Groups
"ClojureScript" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/clojurescript.
