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>