0

I have a lightning component which I display in a community. This component had a design file, so I pass some parameters in the url.

In the community, I access my component with this kind of url :

/myComponent?param1=xxx&param2=yyy

In my component I have a search bar (an input) that I need to validate by clicking an icon, or by pressing the enter key :

<input type="text" id="searchTermId" class="form-control searchTerm" placeholder="{!$Label.c.CL_FAQ_placeholder_rechercher}"  /> 
<i class="icon ic-search" id="searchIcon"></i>

I trigger this in my javascript controller, (in the afterScriptsLoaded method )

document.getElementById('searchIcon').onclick = $A.getCallback(function(e){
        e.preventDefault();
        helper.manageRecherche(component, event);
    });

    document.getElementById('searchTermId').onkeyup =  $A.getCallback(function(event){
        event.preventDefault();
        console.log('event.keyCode : ' + event.keyCode);
        if(event.keyCode == 13){
            event.preventDefault();
            console.log('passe');
            helper.manageRecherche(component, event);
        }
    });

So the first one, when I click on the icon, is working well. But when I press the enter key, the url become

/myComponent?#

and of course the expected behaviour is not fired.

I use event.preventDefault(); but in this cas it seems that it's not usefull...

3

There's nothing inherently wrong with the code that I can see, but you'll probably want to make your life simple and register your events on the elements directly:

<input onkeyup="{!c.searchTermKeyUpHandler}" type="text" id="searchTermId" class="form-control searchTerm" placeholder="{!$Label.c.CL_FAQ_placeholder_rechercher}"  /> 
<i onclick="{!c.searchIconClickHandler}" class="icon ic-search" id="searchIcon"></i>

If you're testing in IE 11, please note that you probably also need a keydown handler to properly catch the Enter key.

You should not generally be registering events via the classic onXX properties, but instead use addEventListener:

document.getElementById(...)
  .addEventListener("keyup", $A.getCallback(event => { 
    event.preventDefault(); 
    helper.manageRecherche(component, event); 
  }));

It's possible that Locker Service didn't like the onkeyup handler or otherwise messed up the logic, but addEventListener should always be safe.

If possible, make sure your code isn't inside a form, as that can cause the parameters to disappear, and forms are not necessary in Lightning.

Unless you're loading third-party scripts, you don't need to wait for afterScriptsLoaded. You could have registered your events in the render method instead.

  • I change my code to use the addEventListemener as you preconised, and I replace the form tag of my code by a div tag, and then it's working fine, thx ! And thank you for all the tips too, here I use the Unobtrusive JavaScript because I was said it is safier, I'm curious to have your opinion on that. – dou Feb 23 '18 at 9:29
  • 1
    @dou It makes sense in some contexts, but Lightning doesn't seem to be designed that way. The general theory is that you should do what the platform is designed to do. Note that you can't call arbitrary JavaScript, but instead must call controller methods via {!c.methodName}. The fact that you have to put this "unobtrusive JavaScript" in to a third file should be enough to convince you that it probably isn't the right method to use (such hooks would normally be added in "render", not "afterScriptsLoaded"). – sfdcfox Feb 23 '18 at 9:53

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.