Need to enable focus on <ui:inputTextArea /> lightning component field

Question

I am using a button to open a modal and inside a modal there is some form fields and I when user a modal then <ui:inputTextArea /> should be automatically on focus mode so a user can directly start typing without on click in field.

Codes.. A Application event fire by another component and i am using following function to open modals according to value. handleEvent controller fire by a event

Component and controller from whare we calling event

 <lightning:button aura:id="logacall" label="Log A Call" value="1" onclick="{!c.openModal }" />


openModal: function(component, event){
    var menuValue = event.getSource().get("v.value");

    // Fire lightning event to call related modal        
 var DI_ActionEvent = $A.get("e.c:DealInvestors_ActionEvent");
            DI_ActionEvent.setParams({
                modalId: menuValue
            });
            DI_ActionEvent.fire();  
    },

Component

<aura:handler event="c:DealInvestors_ActionEvent" action="{!c.handleEvent}"/>

 <div class="slds-form-element__control">
     <ui:inputTextArea aura:id="formTextArea" />
 </div>

Controller

handleEvent : function(component, event, helper) {
    var modalId = event.getParam("modalId");

    switch(modalId) {
        case "1": helper.logCall(component); break;
        case "2": helper.logEmail(component); break;
        case "3": helper.addNote(component); break;
        case "4": helper.blackList(component); break;
        case "5": helper.scheduleTask(component); break;
    }

In Helper

logCall : function(component) {
    var cmpTarget = component.find('ActionModalBack');
    var cmpBack = component.find('ADM-Back');
    $A.util.addClass(cmpTarget, 'slds-fade-in-open');
    $A.util.addClass(cmpBack, 'slds-backdrop--open'); 
    component.set("{!v.getTitle}", 'Log A Call');

    component.find("formTextArea").getElement().focus();

},

Answer 1

Just add an aura:id to your input like this:

<ui:inputTextArea aura:id="my-element" />

Then, when the modal is displayed, select your input in your javascript function, and set the focus to it:

component.find("my-element").getElement().focus();

Answer 2

It's working by adding a small timeout

setTimeout(function(){ 
  component.find("my-element").getElement().focus();
}, 500);

Answer 3

You might try ensuring your component is version is 40, and using the lightning:input type="textarea" and then cmp's api focus method.

 component.find('myinput').focus();