4

I have a component which consists of another child component which is added dynamically:

<aura:component>
    <ltng:require styles="/resource/SLDS0122/assets/styles/salesforce-lightning-design-system-ltng.css" />
     <aura:attribute name="attachments" type="Aura.Component[]" description="Array of Components for adding attachement components"/>
                <aura:handler name="removeAttachment" event="c:removeAttachment" action="{!c.removeAttachment}"/>
    <div class="slds-attachments">
       <!--File attachment components are added here -->
           {!v.attachments}
     </div>
    </aura:component>

And child component which has a registered event as follows:childComponent

<aura:component>
    <!-- Handler -->
    <aura:Handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:registerEvent name="removeAttachment" type="c:removeAttachment"/>
<button class="slds-button slds-button--icon-bare" onclick="{!c.fireRemoveAttachmentEvt}"/>
</aura:component>

Controller:

{
    fireRemoveAttachmentEvt : function(cmp,evt,hlpr){
        console.log("Inside fireRemoveAttachmentEvt");
        var removeAttachEvt = cmp.getEvent("removeAttachment");
        console.log(removeAttachEvt.getName());
        removeAttachEvt.fire(); 
    },
}

Now i am able to handle the event if put a handler in the same component, but if i try to handle the event in an another component, the method referenced in the action attribute of handler is not executed.

Any help on this greatly appreciated. Thank you.

9

2 Answers 2

3

The only way i was able to make this work was referencing the event handling method while creating the components. Check the below code for example.

$A.createComponent(
                "c.caseFeedCommentAttachment",
                {
                    "isFileValid" : isFileValid,
                    "filename":inputFileList[i].name,
                    "filePath":fileURL,
                    "filetype":inputFileList[i].type,
                    "fileSize":fileSize,
                    "aura:id":inputFileList[i].name+uploadCounter.toString(),
                    "removeAttachment" : component.getReference("c.handleRemoveAttachmentEvt")
                },

Note: Also i have removed the event handler on the Parent component, just to check if the method is called. It still works which is confusing.

2
  • That's totally odd. Any idea why this works? Is that documented somewhere? Sep 8, 2017 at 15:09
  • 1
    I think this happened due to a bug where the registerEvent component failed to create a reference to the event in the dynamically created component context. So when i try to get the event and fire it which calls the event handler in another component controller, it failed because there is no such event associated with that name. But when i pass the handler as a reference directly, it works. Sep 14, 2017 at 19:26
3

I think that is the same issues as mentioned here: Event fired by a dynamically created component does not get caught - have an eye at the comments from Doug Chasman.

As I understood there is a bug in the framework which prevents event bubbling for dynamically created components. Workaround will be the usage of application event (also mentioned in the post).

1
  • Any word on when the bug will be fixed, is there a link to a known issue, it still appears to be broken Sep 21, 2016 at 1:52

You must log in to answer this question.

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