focus input in tree reagent/re-frame

[Jamie Orchard-Hays]

The classic example uses:

:component-did-update #(when @editing? (.focus (reagent/dom-node %)))

This works fine if the :input element is the root doc of the component.

If I'm wrapping it, in say a :span tag, how do I access the :input, now that it is a child rather than root.

Cheers,

Jamie

[Marc Fawzi]

you might have to resort to .getElementById or .getElementsByTagName to select the child ad then call .focus on it, 

I think there should also be a way to get the children from reagent/current-component

but that is uncomfortable to me as you're manipulating the DOM elements directly

I tried "autoFocus" attribute with plain React and it works fine upon mount, but when I specified the attribute in Reagent it did nothing.

--
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 clojurescrip...@googlegroups.com.
To post to this group, send email to clojur...@googlegroups.com.
Visit this group at http://groups.google.com/group/clojurescript.

[Jamie Orchard-Hays]

There was a discussion around this last year:

https://github.com/reagent-project/reagent/issues/5

I ended up moving the input code out of my component into a TextInput component so the point may be moot at this point. I'm in the middle of making some generic components for my app. I have an EditableTextField that I extract the text input from. You know, click on it, get to edit the text. I decided it was better to break it up into more discrete components.

Jamie

PS: I use CamelCase to name my view components b/c it makes them absolutely obvious in the source code. I think I first saw this in some Om examples a year ago and adopted when I wrote an Om app last year.

[Marc Fawzi]

I see. You also have .querySelector which takes CSS selectors like .some-class and #some-id and is scoped to the element it is called on (so it will target the element's descendants.

Sent from my iPhone

[Jamie Orchard-Hays]

Cheers. I wish my client-side foo was better, but it is the part of the stack I have the least knowledge of and probably don't know a lot of stuff obvious to real client-side jockeys. 

Jamie

[Marc Fawzi]

"Hello darkness, my old friend" ... replace darkness with DOM, anytime!

[Jamie Orchard-Hays]

right on

[Jamie Orchard-Hays]

This works:

:component-did-update (fn [self _] (-> self reagent/dom-node .-firstChild .focus))

[Marc Fawzi]

cool, 

but if we could get the autoFocus attribute to work in Reagent (it works in React) then t would be as simple (and elegant) as setting it in the hiccup e.g. [input {:autoFocus true}] or  [input {:autoFocus ""}] but I couldn't get that to work. autoComplete works fine.

https://facebook.github.io/react/docs/tags-and-attributes.html