Un-hide and focus an element in a Lightning component

Question

I want to show an input element that is hidden, and focus it.

Component code:

<aura:component >
    <div>
        <input aura:id="input" class="hidden"/>
        <button onclick="{!c.toggleAndFocus}">Toggle and focus!</button>
        <button onclick="{!c.focus}">Focus!</button>
    </div>
</aura:component>

Controller:

({
    toggleAndFocus : function(cmp, event, helper) {
        var input = cmp.find("input");
        $A.util.toggleClass(input, "hidden");
        input.getElement().focus();
    },

    focus : function(cmp, event, helper) {
        var input = cmp.find("input").getElement().focus();
    }
})

And the hidden CSS class just applies display: none.

Pressing the "Toggle and focus!" button toggles the visibility of the input as expected. However, it doesn't focus the input after showing it. Pressing the "Focus!" button when the input is shown focusses the input as expected.

How can I make this "Toggle and focus!" button focus the input after showing it?

Answer 1

If your focus() function works, why don't you call it in your toggleAndFocus function?

Just move your focus() function to your helper

e.g.:

Controller:

toggleAndFocus : function(cmp, event, helper) {
    var input = cmp.find("input");
    $A.util.toggleClass(input, "hidden");
    helper.focus(cmp);
}

Helper:

focus : function(cmp) {
    var input = cmp.find("input").getElement().focus();
}

If you want to call your focus function from a component handler, you need a controller function that passed through to the helper.

E.g.

Controller:

focus: function(cmp, event, helper){
    helper.focus(cmp)
}