2

I have a modal window from which I am sending an event to the parent component from where I opened Modal window. But it is throwing an error. Is there a way to fix it?

//ServiceContractHierarchyModal.js
import { LightningElement, wire, api } from "lwc";
import LightningModal from 'lightning/modal';

import { getRecord } from 'lightning/uiRecordApi';

export default class ServiceContractHierarchyModal extends LightningModal {
    @api recordId;
    @api objectApiName;
    @api isParent;

    handleClose(e) {
        this.close('okay');
    }

    handleAssetSelection(e) {
        console.log('in handleAssetSelection', e);
        this.dispatchEvent(new CustomEvent('select'));
    }

}

Here is the modal html

<template>
    <lightning-modal-header label="My Modal Heading"></lightning-modal-header>
    <lightning-modal-body>
        <div class="slds-box slds-box_x-small">
        <c-service-contract-hierarchy-quick-view record-id={recordId} object-api-name={objectApiName} is-parent={isParent}></c-service-contract-hierarchy-quick-view>
    </div>
        <div class="slds-box slds-box_x-small slds-m-top_small">
        <c-assets-with-entitlements record-id={recordId} object-api-name={objectApiName} is-parent={isParent} onselect={handleAssetSelection}></c-assets-with-entitlements>
    </div>
    </lightning-modal-body>
</template>

Parent component code

ServiceContractHierarchyModal.open({
        label: 'Modal Title',
        size: 'small',
        description: 'Service Contract details and asset list',

        recordId: row.id, 
        objectApiName: row.objectApiName, 
        isParent: row.isParent,
        onselect: (e) => {
            e.stopPropagation();
            console.log(e.detail);
            this.goToRecord(e.detail.row);
        }

    });

enter image description here

3

2 Answers 2

2

From my research, it looks to be an inherent issue with all LWCs that extend anything except for 'LightningElement'. Since using the Lightning Modal requires you to extend your JS controller to use LightningModal (instead of LightningElement):

export default class lwcName extends LightningModal { }

It will not allow any events to be dispatched.

Source: TypeError: parameter 1 is not of type 'Event'

2

We had a similar issue come up and I came across this question while researching it.

In order to fire an event from a modal, you have to attach that event to the modal.open function.

As per this documentation

Modal Events

A modal can only fire events captured by the component that opened it, not the modal itself. Normal techniques can't catch events that fire from the modal, because the events bubble up to a top root element outside of the component that opened the modal.

To capture modal events, attach them in the .open() method invoked by the component that opens the modal.

These are the examples provided.

The modal component

/* c/myModal.js */
dispatchSelectEvent(e) {
  // e.target might represent an input with an id and value
  const { id, value } = e.target;
  const selectEvent = new CustomEvent('select', {
    detail: { id, value }
  });
  this.dispatchEvent(selectEvent);
} 

The containing component

/* c/myApp.js */

// ...
// Process the select event from within the modal
handleSelectEvent(detail) {
  const { id, value } = detail;
  console.log(`select event fired elem with id ${id} and value: ${value}`);
}

// ...
// Trigger visibility of the modal
handleOpenModal() {
  MyModal.open({
    label: 'Modal Title',
    size: 'large',
    description: 'Modal Title with brief description',
    // event triggered when new CustomEvent('select', {detail: {}});
    // occurs *from within* LightningModal.
    // see dispatchSelectEvent() in c/myModal.js above
    onselect: (e) => {
      // stop further propagation of the event
      e.stopPropagation();
      // hand off to separate function to process
      // result of the event (see above in this example)
      this.handleSelectEvent(e.detail);
      // or proxy to be handled above by dispatching
      // another custom event to pass on the event
      // this.dispatchEvent(e);
    }
  });
}
2
  • This doesn't work for me - getting same error :(
    – dzh
    Jul 20, 2023 at 9:18
  • Ended up passing value to this.close({}) and awaiting for result in parent, which seems like a cleaner solution too.
    – dzh
    Jul 20, 2023 at 10:09

You must log in to answer this question.

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