LEX Equivalent of Immediate = TRUE?

Question

In Lightning, I have a pretty simple modal that I call from an action button on a detail page that includes a text area field:

<div class="slds-form-element">
  <div class="slds-form-element__control">
   <lightning:textarea label="Required" name="myText" required="true" messageWhenValueMissing="This field is required."
                  maxlength="1000"  value="{!v.sAlertMessage}"  placeholder="Enter Alert Details Here"/>
  </div>

I then have two buttons - one for submit and one for cancel. The Cancel button just calls the hanldeCancel function in the component controller:

<lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top--medium" />

handleCancel: function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    },

But when I click the button, I get the required field error. In VF land, I'd just use Immediate = TRUE to circumvent that, but I don't see any such option in LEX? Is there any equivalent to tell LEX to just close without validation?

The odd thing is when I click cancel a second time, it does close the modal...

Answer 1

A immediate="true" solution is not needed in Lightning, because validation must be done by the developer, not the framework. Yes, the error appears automatically for you, but it won't stop you from reacting to events, like clicking on the button.

As near as I can tell, the problem appears to be that your button moves. This'll cause you to "mis-click" the button. Make sure you're using a button that can't move, like in a docked footer, or leave enough space for it to appear without disturbing the button.

For example, this application does not work (requires two clicks):

<aura:application extends="force:slds">
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <lightning:textarea label="Required" name="myText" required="true" messageWhenValueMissing="This field is required."
                                maxlength="1000"  value="{!v.sAlertMessage}"  placeholder="Enter Alert Details Here"/>
        </div>
    </div>
    <lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top--medium" />
</aura:application>

While this one does (needs only one click):

<aura:application extends="force:slds">
    <div class="slds-form-element">
        <div class="slds-form-element__control">
            <lightning:textarea label="Required" name="myText" required="true" messageWhenValueMissing="This field is required."
                                maxlength="1000"  value="{!v.sAlertMessage}"  placeholder="Enter Alert Details Here"/>
        </div>
    </div>
    <div style="height: 180px">
        <div class="slds-docked-form-footer">
            <lightning:button label="Cancel" onclick="{!c.handleCancel}" class="slds-m-top--medium" />
        </div>
    </div>
</aura:application>

Note that this specific problem only occurs when the text area is focused, is not currently showing an error, and the very next thing you do is click on the button. As long as your button is fixed in a way that it cannot move, you'll be just fine.