8

I was exploring new lightning-modal module in winter23 release but seems like custom event of the modal is not working. here's my code. I believe lightning-modal is already GA but struggling to understand why the custom event is not working.

modalHelperCode

import { api } from 'lwc';
import LightningModal from 'lightning/modal';

export default class MyModal extends LightningModal {
    @api content;

    handleOkay() {
        this.dispatchEvent(new CustomEvent('select', {
            detail: {
              id: 42
            }
          }));
        this.close('okay');
    }
}

html

<template>
    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
    <lightning-modal-body> Content: {content} </lightning-modal-body>
    <lightning-modal-footer>
        <lightning-button label="OK" onclick={handleOkay}></lightning-button>
    </lightning-modal-footer>
</template>

modalButton

import { LightningElement } from 'lwc';
import MyModal from 'c/myModal';

export default class modalButton extends LightningElement {
    handleSelectEvent(detail) {
        const { id, value } = detail;
        console.log(`select event fired elem with id ${id} and value: ${value}`);
      }
      
      handleOpenModal() {
        MyModal.open({
          label: 'Modal Title',
          size: 'large',
          description: 'Modal Title with brief description',
          onselect: (e) => {
            //e.stopPropagation();
            this.handleSelectEvent(e.detail);
          }
        }).then((result) => {
            console.log('result>>',result);
            
        });
      }
}

<template>
    <lightning-button
        onclick={handleOpenModal}
        aria-haspopup="modal"
        label="Open My Modal">
    </lightning-button> 
    <p>Result: {result}</p>
</template>
12
  • Can you add in your HTML? Commented Oct 18, 2022 at 18:29
  • Yes added the HTML as well @MohithShrivastava
    – Soumi
    Commented Oct 18, 2022 at 18:30
  • 1
    Added the whole JS as well. @MohithShrivastava
    – Soumi
    Commented Oct 18, 2022 at 18:35
  • 1
    Sure @MohithShrivastava will probably raise a case to understand the issue, meanwhile i believe i can pass the same data in the close() method of the modal as well, so probably i'll use this as a workaround till i get any response from support team.
    – Soumi
    Commented Oct 18, 2022 at 19:07
  • 1
    Same issue, when trying to dispatch custom event from class extending LightningModal. The error is only visible when wrapping the dispatch in try/catch. ``` error TypeError: EventTarget.dispatchEvent: Argument 1 does not implement interface Event. dispatchEvent aura_prod.js:6452 dispatchEvent aura_prod.js:3815 ``` ``` import {api} from 'lwc'; import LightningModal from 'lightning/modal'; export default class Modal extends LightningModal { // .... unrelated code handleAction(event) { try { this.dispatchEvent(new CustomEvent('select', { detail: { id: 'Foo' } })); } catch(e) { //Winter 23 has bro
    – user124179
    Commented Oct 29, 2022 at 21:51

2 Answers 2

8

This works only if you have the Lightning Web Security Enabled in the org.

If that setting is disabled, it fails with an error below

error TypeError: EventTarget.dispatchEvent: Argument 1 does not implement interface Event. dispatchEvent aura_prod.js:6452 dispatchEvent aura_prod.js:3815

I am raising this internally at Salesforce to log it as a bug.

UPDATE

This is logged as a bug and will be fixed at some point. We recommend that if you can enable the Lightning Web Security setting, you should.

There is a workaround for this as of today if you have Lightning Web Security disabled.

Wrap around the code that dispatches the event from the Modal within a Child Component so a custom Event is dispatched instead of standard event.

Let's create a child component for the lightning-button used as the footer in the modal component, as shown below.

buttonWrapper.html

<template>
<lightning-button
    label="Ok"
    onclick={handleOkay}
></lightning-button>

buttonWrapper.js

import { LightningElement } from "lwc";

export default class ButtonWrapper extends LightningElement {
    handleOkay() {
    this.dispatchEvent(
        new CustomEvent("select", {
            bubbles: true, 
            composed: true,
            detail: {
                id: 42
            }
        })
    );
}

}

Modify the modal component code to use the Wrapper child component

<template>
<lightning-modal-header label="My Modal Heading"></lightning-modal-header>
<lightning-modal-body> Content: {content} </lightning-modal-body>
<lightning-modal-footer>
    <c-button-wrapper></c-button-wrapper>
</lightning-modal-footer>
2
  • 2
    Thank you for raising it internally. I got this same error today and thought I was losing my mind for some time. Commented Nov 1, 2022 at 18:45
  • Is there a known issue for this or a plan to fix? Commented Dec 12, 2022 at 22:37
1

I've observed this happening even with LWS enabled in an org.

What worked for me to fix this was making the function that dispatches the event asynchronous

    async publishEvent(){
        await this.dispatchEvent(new CustomEvent('event'));
    }

You must log in to answer this question.

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