LWC modal is not closing

Question

I created a LWC which works ok. I created this LWC so that I can use it as a Quick Action. Because LWC can not be used in quick actions for Work Order object, I had to put the LWC in a aura component and then put the aura in the quick action button. The one thing that is not working is the Cancel button. When I hit Cancel, it should close the modal. Also when I hit the submit button it should process the thing we are doing and then automatically close the modal. This close functionality is not happening. Can anyone please help?

LWC html

<template>
    
    <lightning-quick-action-panel>
        <div class="slds-grid slds-wrap">
            <div class="slds-col slds-size_1-of-2 first-last-name">
                <label
                    class="slds-form-element__label slds-float_left your-info-label-field"
                    for="otherSubject">Please enter the zip code</label>
                <lightning-input type="text" variant="label-hidden" label="Zip Code"
                    value={zipCode}
                    onchange={handleZipChange}></lightning-input>
            </div>
        </div>
 
        <div slot="footer">
            <lightning-button variant="neutral"
             label="Cancel" onclick={closeAction}>
            </lightning-button>
            <lightning-button variant="brand"
             label="Add Order" onclick={saveAction} 
             class="slds-m-left_x-small">
            </lightning-button>
        </div>
    </lightning-quick-action-panel>
</template>

LWC JS

import { LightningElement, api, track } from 'lwc';
import {CloseActionScreenEvent} from 'lightning/actions';
import {getRecordNotifyChange} from 'lightning/uiRecordApi';
import getInfo from '@salesforce/apex/Order_QuickAction.getWipersInfo';
import addWoli from '@salesforce/apex/Order_QuickAction.addWipersToWO';
export default class OrderEntry extends LightningElement {
    @api recordId;
    @track zipCode;
    @track wResponse;
    @track wPartNumber;
    @track wPrice = 0.00;



    handleZipChange(event){ //do I even need this method? I want to pass zip code value to a method that's why I have this 
        this.zipCode = event.target.value;
    }

    closeAction(event){
        this.dispatchEvent(new CloseActionScreenEvent());
    }

    saveAction(){
        if(this.recordId){
            getInfo({workOrderId: this.recordId, zipCode: this.zipCode})
            .then(result => {
                console.log('the response is  '+ this.result);
                this.wResponse = result;
                this.wPartNumber = result.PartNumber;
                this.wPrice = result.Price;
                this.wPrice =  this.wipersPrice * 2;
                return addWoli({workOrderId: this.recordId, partNumber: this.wPartNumber, price: this.wPrice})
            }).then(result => {
                
                    getRecordNotifyChange( items [{recordId: this.recordId}]);
                    this.closeAction();
    
            })
            .catch(error => {
                console.log('Error >>>> :: ' + JSON.stringify(error));
                this.error = error;
            });
        }

    }

}

Aura Component

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
    <aura:html tag="style">
        .slds-modal__container { min-width: 70vw; }
    </aura:html>
    <c:orderEntry recordId="{!v.recordId}"/>
</aura:component>

APEX:

public class Order_QuickAction {
    @AuraEnabled
    public static ResponseWrapp getWipersInfo (Id workOrderId, String zipCode){
        WorkOrder wo = [SELECT Id, Vehicle__r.Car_Id__c FROM WorkOrder Where Id =:workOrderId];
        System.debug('The card id is ' + wo.Vehicle__r.Car_Id__c);
        System.debug('The zipcode is ' + zipCode);
        System.debug('The response for wipers is ' +  OrderCalls.getWipers(wo.Vehicle__r.Car_Id__c, zipCode));
        return OrderCalls.getWipers(wo.Vehicle__r.Car_Id__c, zipCode);    //I have used this method in other places and it works it is also giving a response successfully so this method can't be the issue
    }
    
    @AuraEnabled
    public static Boolean addWipersToWO(Id workOrderId, String partNumber, Decimal price){
        WorkOrderLineItem woli = new WorkOrderLineItem();
        woli.WorkOrderId = workOrderId;
        woli.Part_Number__c = partNumber;
        woli.Type__c = 'Part';
        //woli.Quantity = 2;
        //woli.UnitPrice = price;
        woli.Part_Type__c = 'Wipers';
        insert woli;
        return true;
        
    }
}

Can someone please help and let me know why this modal is not closing? Thank you so much

score 0 · Answer 1 · answered May 27 '23 at 19:03

By default custom events doesn't bubble, nor are able to pass the boundaries of shadow dom, so you should pass an object with both properties bubbles and composed setted to true to the CloseActionScreenEvent constructor, this way the event could crosses the shadow boundary and continues bubbling up through the DOM of the aura component, which will handle it closing the screen action.

closeAction(event){
    this.dispatchEvent(new CloseActionScreenEvent({ bubbles: true, composed: true }));
}

By the way, there is an issue with getRecordNotifyChange in saveAction method:
getRecordNotifyChange( items [{recordId: this.recordId}]);
This line has a syntax error, it should be
getRecordNotifyChange([{recordId: this.recordId}]);

score 0 · Answer 2 · edited Aug 07 '23 at 13:58

correct this will work.. you need to import

Call the closeAction in cancel button:

<lightning-button
 label="Cancel"
 variant="neutral"
 onclick={closeAction}>
</lightning-button>


import { CloseActionScreenEvent } from 'lightning/actions';

    closeAction() {
        this.isModalOpen = false;
        this.dispatchEvent(new CloseActionScreenEvent({ bubbles: true, composed: true }));
    }

LWC modal is not closing

2 Answers2