1
  • Use Case

I have a parent container that has a single reusable modal component. There is also a container with many rows of line items rendered as individual components. In certain circumstances a user can click on a row and have the modal open to take input. I need the content of the modal to know which row had the button clicked so I know when to return the input when the user is done.

  • The Flow

The user clicks a button on a row which fires an event. The parent container handles the event and dynamically creates the content for the modal, then overwrites any existing modal content with the new component before showing it on the page. During creation the component that fired the event is stored as an attribute in the modal content component using event.getSource() to find the calling component.

  • The Issue

The first time a button is clicked there is no problem, however any further use of the modal results in the source component being destroyed when the modal content is overwritten.

  • The Question(s)

Why does this happen, can it be avoided and is there a preferred method of handling this use case?

  • The Code

Only relevant parts of the code are included

The container

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global" controller="margins.quoteConfigController">

<aura:attribute name="showModal" type="Boolean" default="false" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}" />
<aura:handler name="onAddLxQ" event="c:getLxQ" action="{!c.showLxQModal}"/> 

<c:modalWithFix aura:id="fixedModal" isActive="{!v.showModal}" />

{!v.body}

The parent controller

    showLxQModal : function (component, event) {

    var modal = component.find("fixedModal");
    modal.set("v.title", "Input Length and Number Required");
    // first get the modal content
    $A.createComponent(
        "c:getLxQContent",
        {
            "aura:id": "getLxQ",
            "eventSource" : event.getSource()
        },
        function(newComponent, status, errorMessage){
            //Add the new bit to the body array
            if (status === "SUCCESS") {
                var body = [];
                body.push(newComponent);
                modal.set("v.body", body);
                component.set("v.showModal", true);
                );
            }
            else if (status === "INCOMPLETE") {
                console.log("No response from server or client is offline.")
                // Show offline error
            }
            else if (status === "ERROR") {
                console.log("Error: " + errorMessage);
                // Show error message
            }
        }
    );

The Modal Content Component

<aura:component >
<aura:attribute name="eventSource" type="Aura.Component[]" required="false" />

</aura:component>
  • Testing has shown that it's not specifically related to the use of event.source() that causes the issue. Any component stored as an attribute will be destroyed when the body of the containing component is overwritten. – Daniel Collier Oct 27 '17 at 1:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.