0

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);
      }
 },
1

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();
    }
})
3

When you are using form, pressing enter when in input, it will automatically submit the form and so browser refreshes. Even use of event.preventDefault() will not stop it.

edited based on recommendation from @sfdcfox in comments

For resolving the issue, change form to div tag :- <form class="slds-form--stacked"> in your code to <div class="slds-form--stacked">

OR


ADDED

If you want the form to be present, prevent default on form submit as following:

<form class="slds-form--stacked" onsubmit="{!c.formSubmitted}">
    -- logic --
</form>

JS:

formSubmitted : function(component, event, helper){
    event.preventDefault();
}
  • this seems to be working, is there a way to wire the press enter to a search button? in other words when the user hit enter key can call the method SearchMovie ? – Nick Kahn Aug 21 at 16:08
  • You are already doing that if(event.getParams().keyCode == 13){ - all the code inside this if block will execute when enter is pressed – salesforce-sas Aug 21 at 16:11
  • Added solution in answer – salesforce-sas Aug 21 at 16:14
  • 1
    I disagree with this solution. The problem is more subtle, and there is a way to prevent form submission. Removal of the form is not required. – sfdcfox Aug 21 at 18:37
  • Yes @sfdcfox, so I added if not needed and gave other solution – salesforce-sas Aug 21 at 18:41
0

It looks like you're trying to stop the standard submission of the form, and call your method directly from a button click or pressing enter in the input box. Correct?

If so, you can stop the form's submit event by changing your form tag to include the following:

<form class="slds-form--stacked" onSubmit="return false">
  • did not work, still refreshes the page – Nick Kahn Aug 21 at 16:05
  • 1
    @NickKahn In Lightning, you have to call a controller method: onsubmit="{!c.preventDefault}" and preventDefault: function(component, event, helper) { event.preventDefault(); } – sfdcfox Aug 21 at 18:23

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.