4

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...

  • What button are you using? Maybe it's calling validate() on your inputs for you? – sfdcfox Feb 28 '18 at 20:39
  • Added the button to the post - it's pretty much just straight from the docs... – BritishBoyinDC Feb 28 '18 at 20:48
  • Does the button move when the error appears? – sfdcfox Feb 28 '18 at 22:35
2

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.

  • Thanks - I ended up removing the required flag, and doing the validation myself as you suggested...every time I tried to move the button, it either looked bad, or didn't work the way I wanted. I need this to go in package, so want to be sure it will work all the time! – BritishBoyinDC Mar 1 '18 at 0:58
  • @sfdcfox what an awesome catch about the button. However, I don't the problem with button move and misclick. Could You please explain in some more details. Thanks in advance – amidstCloud Mar 1 '18 at 2:01
  • @amidstCloud I'd have to see your specific problem. This one was a moving button, so whatever is going on with your thing is probably something else. – sfdcfox Mar 1 '18 at 5:03

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.