[SalesForce] How to capture “Enter” keyboard event on dynamically created lightning:input component

Official docs for lightning:input did not show any keyboard event attributes yet. I have a dynamically created input form and I want to call a controller's method after hitting the enter key on a input text element.

I tried using jQuery to bind the input element with keyup method, but it doesn't seems to be working for me.

Component

 <aura:component>
    <ltng:require scripts="{!$Resource.jQueryLib + '/js/jquery-3.1.1.min.js'}" 
                  afterScriptsLoaded="{!c.afterScriptsLoaded}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <p>Dynamically created input Text</p>
    {!v.body}
</aura:component>

Controller.js

 doInit : function(cmp, event, helper)
    {
        $A.createComponent(
            "lightning:input",
            {
                "label": "First Name",
                "type": "text",
                "name":"testing",
                "class":"inputTestClass"
            },
            function(newText, status, errorMessage){
                if (status === "SUCCESS") {
                    var body = cmp.get("v.body");
                    body.push(newText);
                    cmp.set("v.body", body);
                    console.log("I printed out after scripts loaded");
                }
                else if (status === "INCOMPLETE") {
                    console.log("No response from server or client is offline.")
                    // Show offline error
                }
                else if (status === "ERROR") {
                    console.log("Error: " + errorMessage);
                    // Show error message
                }
            }
        );                      
    },
  afterScriptsLoaded:function(component, event, helper)
  {
    console.log(jQuery(".inputTestClass").children().children("input"));  
    //returns nothing; 
    //expected an input element
    jQuery(".inputTestClass").children().children("input").keyup(function()
    {
            console.log("did I get it?") // Not printed on the console
        });    
   }

Its because, the afterScriptsLoaded is executed first before the init handler called.

Best Answer

I think if you can store the input component using an onfocus event, you can then capture a keyboard event by either:

either attaching a listener to the window or wrapping everything in a span or div with a onkeyup event.

Markup:

<span onkeyup="{!c.handleKeyup}">
  <lightning:input label="Name" name="myname" onfocus="{!c.handleFocus}"/>
</span>

Controller:

handleFocus: function(component, event, helper) {
    var src = event.getSource();
    component.set("v.currentInput",src);
},

handleKeyup: function(component, event, helper) {

    //you have the relevant input + the keyboard event
    var currentInput = component.get("v.currentInput");

    if(event.key == 'Enter') {
      console.log(event);
        //do something
    }
}

EDIT

Forgot to say, to add your focus handler to the dynamically created component, use component.getReference() to get a ref to the method. Eg in your component creation call, do something like this:

"lightning:input",
 {
   "aura:id": "findableAuraId",
   "onfocus": component.getReference("c.handleFocus"),
   "label": "your label",
   "name": "your name"
 },

In the handleKeyup method, you can then do whatever processing you need as you have both the keyboard event and the relevant component.

Related Topic