I have an LWC child component that is dispatching a custom event as such:

        console.log('bw: fire saveslotclick custom event');
        //fireCustomEvent(this, 'saveslotclick', { slot: this.editedSlot });
        let customEvent = new CustomEvent('saveslotclick', {
            detail: this.editedSlot,
            bubbles: true,
            cancelable: true
        console.log('bw: customEvent = ' + JSON.stringify(customEvent, null, 4));

I have the listener wired up in the parent as such:

        <div onsaveslotclick={handleSaveSlotClick}>

code behind parent:

    handleSaveSlotClick = (event) => {
        console.log('bw: parent heard saveslotclick custom event');
        this.startTime = new Date();
        this.isLoading = true;

        this.renderSlot = false;

The console output shows: bw: fire saveslotclick custom event, but does NOT show: bw: parent heard saveslotclick custom event

This event logic has worked for over a year in production, but in a new sandbox no events seem to be firing or being heard.

Any idea what is going on here?


The event is bound to the parent div because the components are nested like so:

    <!-- parent -->
    <div onsaveslotclick={handleSaveSlotClick}>
                        <!-- event is fired here -->

This has been working for over a year and event bubbling should correctly trigger the listener. So I am wondering if there is a lightning setting introduced that may have changed this behavior.

EDIT: added console.log of customEvent...

bw: customEvent = {
    "isTrusted": false,
    "composed": false,
    "detail": {
        "allowDelete": false,
    "type": "saveslotclick",
    "target": null,
    "currentTarget": null,
    "eventPhase": 0,
    "bubbles": true,
    "cancelable": true,
    "defaultPrevented": false,
    "timeStamp": 19182.09999999404,
    "srcElement": null,
    "returnValue": true,
    "cancelBubble": false,
    "path": [],
    "NONE": 0,
    "AT_TARGET": 2,
  • Suggest you console.log immediately before and after this.dispatchEvent and also log the customEvent. Also, what component is handleSaveSlotClick implemented in?
    – Keith C
    Commented Mar 7, 2022 at 18:22

1 Answer 1


you should add event to component not to div

    <c-child onsaveslotclick={handleSaveSlotClick}></c-child>

i think your customevent constructor not happens successfully, if u add console.log statement before dispatch you 'll see errors. i guess because cancelable is read only property https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable

if you don't mind what scenario's force you to add bubbles & cancelable ?

i removed both of then it's works for me.

  • I will try that, but why has it worked this way for over a year now and now it is an issue? Commented Mar 7, 2022 at 17:56
  • Yeah @BillWoodson with bubbles: true listeneing on the div should be OK.
    – Keith C
    Commented Mar 7, 2022 at 18:18
  • I removed both bubbles and cancelable and it did not change the outcome, still does not work. Commented Mar 7, 2022 at 18:22

You must log in to answer this question.

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