[SalesForce] Lightning: Stop page refreshing WHEN Enter key is pressed

I am using the ui:inputtext for lightning component. When the user hit enters the page refreshes. Is there anyway to stop it from doing that.

Cmp

<aura:component controller="MovieController">

    <aura:registerevent name="searchfilter" type="c:searchEvent"/>
    <aura:attribute name="movie" type="Movies__c"
                     default="{'sobjectType' : 'Movies__c',
                             'Name': '',
                             'Director__c': '',
                             'Genres__c': '',
                             'Duration__c': 0,
                             'Year__c': 0,
                             'Content_Rating__C': '',
                              'Plot__c': ''}"/>
    <div class="SearchBox" >
 <fieldset class="slds-box slds-theme--default slds-container--full">
    <form class="slds-form--stacked">

         <div class="slds-form-element slds-is-required">
          <div class="slds-form-element__control" style="text-align: center">
             <div calss="searchinput" style="padding-left: 150px; padding-right: 150px; padding-bottom: 20px; min-width: 200px;">
        <ui:inputText aura:id="iName"  value="{!v.movie.Name}" label="Search"
                      class="slds-input"   
                      labelClass="slds-form-element__label"
                      keyup="{!c.checkKey}"/>
              </div>
               <ui:button label="Search"  press="{!c.SearchMovie}"/>
             </div>
        </div>        

        <!--ui:button label="Clear"  press="{!c.clearFields}"/-->

    </form>
    </fieldset> 
  </div>
</aura:component>

controller

SearchMovie : function(component, event, helper) {

        helper.getMoviesfiltered(component);   
 },
    checkKey : function(component, event, helper){
     if(event.getParams().keyCode == 13){
            event.preventDefault();
            console.log("enter was pressed");
         helper.getMoviesfiltered(component);
      }
 },

Best Answer

The ui:inputText element fires off a COMPONENT event, which basically hides the native DOM event. There's a parameter you're expected to use (apparently) to get to the base event. Here's a self-contained, fully functional version:

<aura:application >
    <form>
        <ui:inputText keydown="{!c.handleKeyDown}" label="Input" />
    </form>
</aura:application>

({
    handleKeyDown: function(component, event, helper) {
        var domEvent = event.getParam("domEvent");
        if(domEvent.keyCode === 13) {
            domEvent.preventDefault();
            console.log('Enter key was pressed. Cancelling form submission.');
        }
    }
})

Alternatively, you can handle the form submission itself:

<aura:application >
    <form onsubmit="{!c.preventDefault}">
        <ui:inputText label="Input" />
    </form>
</aura:application>

({
    preventDefault: function(component, event, helper) {
        event.preventDefault();
    }
})
Related Topic