5

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.

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.

  • That's totally odd. Any idea why this works? Is that documented somewhere? – Willem Mulder Sep 8 '17 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. – Karthikeya Pammi Sep 14 '17 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).

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.