Lightning Web Components are not supported in Quick Action. But we can encapsulate them in lightning components to overcome this. But the issue comes if we want to close Quick Action Modal from Lightning Web Components (LWC). As we don’t have native support here so we will use a quick hack here. Today we will cover how we can close the Quick Action Modal from Lightning Web Components.
For the demo purpose, I will create simple Lightning Web Components. We will call the event into the parent Lightning component. From the parent Lightning component, we will call the standard method $A.get("e.force:closeQuickAction").fire();
to close the Quick Action Modal.
We can now directly use Lightning Web Components in Quick Action, Check my updated post here. You can update your existing components and use them directly in Quick Action.
This is how our final output will look. As you can see first LWC component is loading and when we click the close the button we are closing the Quick Action. There is no delay here so the user will not notice any difference here.

So now we will view our code:
lwcQA.html
<template>
<lightning-card>
<h3 slot="title">
<lightning-icon icon-name="utility:connected_apps" size="small"></lightning-icon>
Close Quick Action From Lightning Web Components
</h3>
<div slot="footer">
</div>
Record Id from Parent Component: {recordId}
<br/>
<lightning-button label="Close Quick Action" onclick={closeQuickAction}></lightning-button>
</lightning-card>
</template>
lwcQA.js
import { LightningElement, api } from 'lwc';
export default class LwcQA extends LightningElement {
@api recordId;
closeQuickAction() {
const closeQA = new CustomEvent('close');
// Dispatches the event.
this.dispatchEvent(closeQA);
}
}
As we are calling event and passing data to the parent component we don’t need the pub sub module here. We have also passed the current record id from the lightning component which we can use to do our further processing. We can use this to give user edit form using the Lightning Web Components data service.
Now we will check the Parent Lightning Component code. Here we just creating one method to close the Quick Action modal.
QA_LC.cmp
<aura:component implements = "force:lightningQuickAction, force:hasRecordId" >
<c:lwcQA recordId="{!v.recordId}" onclose="{!c.closeQA}"/>
</aura:component>
QA_LC.js
({
closeQA : function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire();
}
})
So with just a few lines of code, we can now use Lightning Web Components(LWC) inside Quick Action(QA) and easily close the Modal after the processing.
You can find complete code on my GitHub repo.
Start the development on Open Source Lightning Web Components here.
Did you like the post or do you have any questions, let me know in comments. Happy Programming 🙂
Excellent! Simple and well explained. Thank you.
Hey
This was very good but can we not do it using navigation service after clicking the close modal button and passing the account id so that it will stay on the same page after closing the modal?
Why we need that when we can simply close the model and stay on same page.