I have code that works 99+% of the time, but occasionally it doesn't work. If you reload the page, then it works again. Here's the situation.

I have a component with a input field. On keyup, a controller function checks to see if the Enter key was pressed. If so, it checks to make sure there's some text in the field, then processes it. If the field is empty, it doesn't do anything (except a console.log message).

Here's the component markup:

 <div class="slds-form-element__control" >
                        <textarea id="inputField"
                                  class="slds-input input-field panel"
                                  placeholder="Type message, press RETURN to send..."

And here's the controller:

keyCheck : function(component, event, helper){
              //check for Enter key (13)
          if (event.which == 13)
              //trim to make sure message isn't empty or just spaces
              var MessageInput = document.getElementById("inputField").value;
              if(MessageInput && MessageInput.trim()){
                  //console.log("Enter key & valid message found");
                  component.set("v.MessageInput", MessageInput)
                  helper.saveMessage(component, event, helper);
              } else console.log("no message");

When the error happens, the console.log message is executing, so the function is firing, and the ENTER key is being recognized, but the value of the input field (document.getElementById("inputField").value) is not being recognized.

I'm having difficulty troubleshooting it because I can't replicate the issue.

Does anyone see anything wrong with the code? Have you seen this problem before?

  • Not the cause of your problem, but FYI relying on a DOM id is an anti-pattern here as that would break your logic if there was more than one instance of your component (or some other markup also used the same id).
    – Keith C
    Oct 29 '18 at 15:43
  • Thanks Keith, I was wondering about that possibility. At the very least, I should give it a more unique id -- then, I'll only have to worry about competing with my own component. I don't think that's the issue, though, because reloading the page clears up the problem -- which it wouldn't if there were another field by the same id. Oct 29 '18 at 16:08

I think you should try using component.find("your aura id here"). With locker service, Salesforce is not compatible with few Javascript features. Try replacing with component.find("your aura id here") and see. I had similar issue and this fixed my problem.


  • I can use component.find to get the element, but I can't figure out how to pull the value from that element. Oct 29 '18 at 21:58
  • I can convert it all to <lightning:textarea> and then get the value just by assigning it to an attribute. The problem there is I can't figure out how to force the focus on this field when it loads. That's the reason I was going with <textarea> (non-lightning) in the first place. Oct 29 '18 at 21:59
  • did you try component.find("aura id").getElement();
    – Anurag
    Oct 30 '18 at 13:23
  • @PatMcClellan__c Try wrapping it around the div tags with aura id and use component.find("aura id").getElement(); or event.getSource().get("v.name");
    – Anurag
    Oct 30 '18 at 13:31

I found a way to do focus() on a lightning:textarea. It won't work in the component markup, or in the onInit function. You have to put it in a renderer:

    afterRender : function(component, event, helper)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.