3

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();

},

3 Answers 3

2

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();
8
  • Its not working for me...
    – Tariq
    Commented Jun 19, 2017 at 9:28
  • When i am using setTimeout function with 5 second this will start working. Why ?? i don't want to use any timeout
    – Tariq
    Commented Jun 19, 2017 at 9:38
  • This is because you have to execute this code when the modal fire the is shown event (ie: when the modal finished its loading). Please post your whole javascript code about the modal. Commented Jun 19, 2017 at 9:49
  • Code updated please check what is the issue..
    – Tariq
    Commented Jun 19, 2017 at 9:55
  • Where's the part of the modal show event? Commented Jun 19, 2017 at 9:58
2

It's working by adding a small timeout

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

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();

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .