2

I have a simple lightning component which is embedded in a vf page and configured as a vf tab in service cloud console. So if I navigate to that tab in service cloud console my lightning component shows up. I have not switched to lightning experience. Hitting the enter key messes up the console by creating a classic header inside the console frame. Below is my code, I am not able to figure out other keys work but not the enter key.

    // VF page

<apex:page  > 
    <apex:includeScript value="/lightning/lightning.out.js" />
    <script>
    $Lightning.use("c:TestApp", function() {
        $Lightning.createComponent(
            "c:TestForm",
            {},
            "theTest",
            function(cmp) {
                console.log("Component created!");
                console.log(cmp);
            });
    });
    </script>

    <div id="theTest"></div>
</apex:page>


//Lightning app
<aura:application extends="ltng:outApp" >
    <aura:dependency resource="c:TestForm"/>    
</aura:application>


//Lightning component
<aura:component >
    <aura:attribute name="Name" type="String" default=""/>
    <form class="slds-form"> 
        <div >
            <ui:inputText class="slds-input" value="{!v.Name}" placeholder="Name"
                          required="true" keyup="{!c.keyUpAction}" />
        </div>
    </form>
</aura:component>

//js controller
({
    keyUpAction: function(component, event, helper) {
        console.log('key = '+event.getParams().keyCode);
        if(event.getParams().keyCode == 13){
            console.log('key enter ');

        }
    },
})
  • 1
    Do you need the form tag? Or you would perform the processing in the JS controller itself? If so, you can try removing the form tag in the lightning component, which will not submit the page, or some other alternative which avoids submission of the page. – Hemant Jain Sep 28 '17 at 8:43
3

I found that in VF this happens due to events leading to form resubmission. As said in the comments you can try to remove the form.

Alternatively you could handle the right key event. The keyCode of the enter-key is 13. Also the backsprace (keyCode 8) can cause an unwanted back-navigation. However in textareas or Richtext-Editors you want enter and backspace be handled by them, so you need to exclude them and maybe need to review the exclusion again, if enter or backspace don't work as expected (with backspace this happened for me with CKEditor).

In pure VF I have done this like that (pardon my jquery):

    // prevent bad default behavior
        $(document).on("keypress", ":input:not(textarea)", function(event) {
            if (event.keyCode == 13) {
                event.preventDefault();
            }
        }); 
        $(document).keydown(function(e){
            // console.log('BACKSPACE', e ); 
            if ( e.keyCode == 8 
                    && e.target.tagName != 'INPUT' 
                    && e.target.tagName != 'TEXTAREA' 
                    // && !e.target.className.contains('cke_editable') // Carefull! String.contains() is not standard js use indexOf() instead. I'm using a polyfil here 
            ){
                e.preventDefault();
            }
        });     

Not tested if it applies perfectly on LCs via lightning out, but I would give it a try.

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.