Event handler when user click the 'X' button of quick action

Question

I have an LWC component that gets triggered via a quick action. I want to refresh the page from where the quick action is launched when someone clicks on the 'X' icon. I'm not able to find any event for this close action that I can handle in my JavaScript.

HTML:

<!-- Custom Header with Icon and Title -->
<lightning-modal-header label="Quickbook Invoice Generation">
</lightning-modal-header>

<!-- Conditional Rendering of the First Card (Download Invoice) -->
<template if:true={displayDownloadButton}>
<lightning-card>
    <!-- Description Text -->
    <div class="slds-p-horizontal_medium slds-p-bottom_small slds-text-body_regular slds-text-align_center">
        You can download your invoice by clicking the button below.
    </div>

    <!-- Download Button with Styling -->
    <div class="slds-align_absolute-center slds-p-vertical_small">
        <lightning-button 
            label="Download Invoice" 
            variant="brand" 
            icon-name="utility:download" 
            icon-position="left" 
            onclick={handleDownloadClick}>
        </lightning-button>
    </div>
</lightning-card>
</template>

<!-- Conditional Rendering of the Second Card in Progress -->
<template if:false={displayDownloadButton}>
    <lightning-card>
        <!-- Description Text -->
        <div class="slds-p-horizontal_medium slds-p-bottom_small slds-text-body_regular slds-text-align_center">
            Invoice Generation is in progress.
        </div>
    </lightning-card>
</template>

Answer 1

Assuming you have used https://developer.salesforce.com/docs/component-library/bundle/lightning-modal/documentation, and if you have used .open() method to open your modal.

You can use

const result = await YOUR_MODAL.open({
    size: 'large',
    description: 'Accessible description of modal\'s purpose',
    content: 'Passed into content api',
});
// if modal closed with X button, promise returns result = 'undefined'
// if modal closed with OK button, promise returns result = 'okay'
console.log(result);

Here if you see, if someone clicks X then the result would be returned as 'undefined'.