How to show lightning toast on top of modal (quick action)?

Question

I have created lightning quick action to add my component for some functionality.

so from my quick action. When I do some validation like

    var opp = component.get("v.objOpportunity");
    if(!opp.Name.length || !opp.CloseDate.length )
    {
        var toastEvent = $A.get("e.force:showToast");
        toastEvent.setParams({
            "message": 'Opportunity name and close date can not be empty.',
            "type": "Error"
        });
        toastEvent.fire();
        return;
    }

So the toast message display behind the modal. Please check below screenshot.

Any solution for this issue? I don't want to write custom error message functionality to display to user.

Answer 1

Not an immediate answer, but the long term solution would be to indicate the known issue affects you Lightning Component force:showToast event displays toast message behind action window in Lightning Experience and Salesforce1

Answer 2

You can use the lightning:notificationsLibrary and put a notice up over your modal. It's not the same as a toast, but might work in some cases.

Answer 3

I think your issue is similar to this. Known Issue

Answer 4

I created a simple custom ToastError component to get around this limitation.

Usage

<c:ToastError visible="{!v.showError}" contents="{!v.errorMessage}" />

Implementation:

ToastError.cmp

<aura:component>

    <aura:attribute name="visible" type="Boolean" default="false" />
    <aura:attribute name="contents" type="String" />

    <aura:if isTrue="{!v.visible}">

        <div class="slds-notify_container slds-is-relative slds-m-bottom_small">
            <div class="slds-notify slds-notify_toast slds-theme_error" role="status">
                <span class="slds-icon_container slds-icon-utility-error slds-m-right_small slds-no-flex slds-align-top">
                    <lightning:icon iconName="utility:error" size="small" variant="inverse" />
                </span>
                <div class="slds-notify__content">
                    <h2 class="slds-text-heading_small">
                        {!v.contents}
                    </h2>
                </div>
                <div class="slds-notify__close">
                    <lightning:buttonIcon iconName="utility:close" onclick="{! c.handleCloseClick }" size="small"
                        variant="bare-inverse" />
                </div>
            </div>
        </div>

    </aura:if>

</aura:component>

ToastErrorController.js

({
    handleCloseClick: function (cmp, event, helper) {
        cmp.set("v.visible", false);
    }
})

Answer 5

Use this style element in you component, It worked for me

<aura:html tag="style">
    .toastContainer {position : fixed !important;}
</aura:html>