I have a component that includes a child component. The child component has a button that fires showCustomModal on an overlayLibrary and the content is a dynamically created component.

Component hierarchy:

        Grandchild (Dynamically created)

The grandchild has a button that fires a component event that should be handled in the child component. The event fires, but is not handled. However, if I close the modal and re-open it and then click the button again the event is both fired and handled.

Parent component

<aura:component implements="flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes">
    <c:TestChild />

Child Component

<aura:component >
    <aura:handler name="testEventName" event="c:TestEvent" action="{!c.handleTestEvent}" includeFacets="true"/>
    <aura:attribute name="overlay" type="Aura.Component[]" />
    <lightning:overlayLibrary aura:id="overlayLib"/>
    <lightning:button label="Open Modal" onclick="{!c.createComponent}" />

Child Controller

    createComponent : function(component, event, helper) {
                testEventName: component.getReference('c.handleTestEvent'),
            function(content, status, errorMessage) {
               if (status === "SUCCESS") {
                       header: "Test Title",
                       body: content, 
                       showCloseButton: true,
                   }).then(function (overlay) {
                        component.set('v.overlay', overlay);
    handleTestEvent : function(component, event, helper) {

Grandchild component

<aura:component >
    <aura:registerEvent name="testEventName" type="c:TestEvent" />
    <lightning:button label="Fire event" onclick="{!c.fireEvent}" />

Grandchild controller

    fireEvent : function(component, event, helper) {
        var componentEvent = component.getEvent('testEventName');


<aura:event type="COMPONENT" description="Test event" />

1 Answer 1


You might try instead of using component.getEvent('testEventName') in your grandchild controller, use event.getSource().

And then, when we handled the event in the parent component, we use event.getSource again.

Our example isn't directly related to yours, but here is the reference of how we are using it and it has been working whether it be in a dynamic component where it gets created with create component, or when it is being explicitly used in markup.


<aura:event type="COMPONENT" description="Dispatched when a select has changed value">
    <aura:attribute name="values" type="String[]" description="Selected values" access="global" />

The event getting registered on the child

<aura:registerEvent name="valueChange" type="c:SelectChange" />

The child component event method

handleChangeEvent : function(component, event) {
        var eventSource = event.getSource();
        var values = eventSource.get("v.value");
        var cmpEvent = component.getEvent("valueChange");
            "values" : values

Handling the event on the parent

<aura:handler name="valueChange" event="c:SelectChange" action="{!c.handleEvent}" />

Then in the parent controller

handleEvent : function(component, event, helper) {
        var value = event.getParam("values");
        var item = event.getSource();
        item.set("v.value", value);
        component.set("v.validForm", helper.validateForm(component));

Here is a link with more information on Handling Events with Client Side Controllers.

  • Thank you for your answer! We ended up using application events, as this unfortunately did not solve our issue. Commented Oct 9, 2017 at 6:39

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .