Event fired by a dynamically created component does not get caught

Question

I'm trying to handle the following task:

a component creates on the init-event a component dynamically

CREATOR COMPONENT

.cmp

<aura:handler name="someEvent" event="someEvent" action="{!c.someEventHandler}"/>

<aura:handler name="init" value="{!this}" action="{!c.createDetail}"/> {!v.body} </div>

.controller

createComp : function(component, event, helper){
        component.set("v.body", []);

        $A.createComponent(
            "c:someComp",
            {},
            function(newComp){
                var newCompBody = component.get("v.body");
                newCompBody.push(newComp);
                component.set("v.body", newCompBody);
            }
        );
},

someEventHandler : function(component, event, helper){
console.log("event caught");
}

This works just fine. A component event is fired in the component that got created dynamically. This event should be handled by the component that created the other component but its not working ... (console.log does not show up)

CREATED COMPONENT

.cmp

<aura:registerEvent name="someEvent" type="c:someEvent" />

.controller

// action for a button
someAction : function(component, event, helper){
        var someEvent = component.getEvent("someEvent");
        someEvent.fire();
        console.log("save event fired");
    }

Any suggestions?

Thanks!

Answer 1

Supporting @Menzman's solution, changing to an Application event in the interim will resolve this.

Once thing to watch out for however is to make sure you remove the name attributes from the handlers, otherwise they won't work.

So your handler would be:

<aura:handler event="someEvent" action="{!c.someEventHandler}"/>

And firing the event would look like:

// action for a button
someAction : function(component, event, helper){
    var someEvent = $A.get("e.c:someEvent");
    someEvent.fire();
    console.log("save event fired");
}

The event handler will remain unchanged.

Answer 2

Your code is not wiring up the someEventHandler action method during the create of someComponent.

The empty {} in the call to $A.createComponent() needs:

{
   someEvent: component.getReference("c.someEventHandler")
}

See https://developer.salesforce.com/docs/atlas.en-us.198.0.lightning.meta/lightning/js_cb_dynamic_cmp_async.htm for an example of how to do that.

Answer 3

(sorry I still can't write a comment so...)

@Marco S88: as workaround I used an application event (https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/events_application.htm).

The downside is that it is recommended to favor component events over application events and you can't have different names for the same event type - but in my situation an application event did the magic.

Answer 4

I ran into this issue, however, I found that when I un-rendered the child component and then re-rendered it the component event was being handled.

Which led me to think, the problem was the parent component declaring the handler before the child component is downloaded to the client and therefore not handling the event, but once the child component was closed and reopened, its markup was already downloaded by the client and the parent component's handler the firing of the event.

I added dependencies for the child component and event to the parent component's markup, and now the parent component is correctly handling the event.

Here is the updated code:

Parent.cmp

<aura:handler name="init" value="{!this}" action="{!c.handleInit}" />

<lightning:overlayLibrary aura:id="overlayLib" />

<aura:method name="display" action="{!c.handleShowModal}">
    <aura:attribute name="attrs" type="Object" />
</aura:method>

<aura:dependency resource="markup://c:childCmp" />
<aura:dependency resource="markup://c:Callback" type="EVENT" />

ParentController.js

handleShowModal: function (component, event, helper) {
    var modalFooter;
    $A.createComponent(
        ["c:childCmp", {onsave: component.getReference('c.handleSave')}],
        function (content, status) {
            modalFooter = content;
            if (status === "SUCCESS") {
                component.find('overlayLib').showCustomModal({
                    footer: modalFooter,
                    cssClass: "slds-modal_medium"
                })
            }
        }
    );
},

handleSave: function (component, event, helper) {
    var selectedOpps = component.get('v.opportunities').filter(opp => {
        return opp.selected;
    });
    console.log(selectedOpps);
}

childCmp.cmp

<aura:registerEvent name="onsave" type="c:Callback" />

<lightning:button variant="brand" label="Save" onclick="{!c.handleSave}" />

ChildCmpController.js

handleSave: function (component, event, helper) {
    component.getEvent("onsave").fire();
},

Answer 5

(sorry I can't write a comment)

I can confirm that I have the same issue with this scenario:

When I hardcode/instantiate a certain component as part of a subcomponent like this:

<aura:component>
    <ul aura:id="listElementsContainer">

        <c:MyListElementComponent />

    </ul> 
</aura:component>

then an outer/more top level component can catch the event fired inside MyListElementComponent - but when I do the creation in the controller like this

    createListElements : function(component) 
    {
        var listElementsContainer = component.find("listElementsContainer");

        $A.createComponent(
        "c:MyListElementComponent", 
        {
            "data": someData
        }, 
        function(newComponent)
        {
            var bodyContainerArray = listElementsContainer.get("v.body");
            bodyContainerArray.push(newComponent);
            listElementsContainer.set("v.body", bodyContainerArray);
        });
    }

the event fired (I debugged the event is beeing fired) is never catched (handler did not change at all). Even when I inspect the DOM there is no obvious different between the "hardcoded" element and the "generated" element.