Calling LWC from a quick action Aura component displays two modals. One of LWC and the other of Aura

Question

I have a quick action button that calls an aura lightning component that calls an embedded LWC.

Quick action Aura:

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickActionWithoutHeader" access="global" >
    <aura:html tag="style">
        .slds-modal__content{
        height:unset !important;
        max-height:unset !important;
        }
        .slds-modal__container{
        width:60% !important;
        max-width:60% !important;
        }
    </aura:html>
    
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <!-- Modal/Popup Box Header Starts here-->
            <header class="slds-modal__header">
                <lightning:buttonIcon iconName="utility:close"
                                      onclick="{! c.handleCloseQuickAction }"
                                      alternativeText="close"
                                      variant="bare-inverse"
                                      class="slds-modal__close"/>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">{!$Label.c.code_Title}</h2>
            </header>
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <c:codeGeneratoLWC recordId="{!v.recordId}"/>
            </div>
        </div>
    </section>
</aura:component>

LWC HTML:

<template>
    <template if:true = {isSame}>
            <lightning-card>
                <div class="slds-align_absolute-center" style="height:3rem">{label.cfSame}</div>
            </lightning-card>
    </template>
    <template if:true = {isDifferent}>
        <lightning-card>
            <div class="slds-align_absolute-center" style="height:3rem">{label.cfDifferent}</div>
            <div class="slds-m-around_medium"> 
                <table  class="slds-table slds-table_bordered slds-table_striped slds-table_cell-buffer slds-table_fixed-layout">  
                    <thead>  
                        <tr class="slds-text-heading_label">  
                            <th scope="col">  
                                <div class="slds-truncate slds-border_right" style = "white-space: pre-wrap" title={label.cfInserted}>{label.cfInserted}</div>  
                            </th>
                            <th scope="col">  
                                <div class="slds-truncate" style = "white-space: pre-wrap" >{codeExisting}</div>  
                            </th>
                        </tr>
                        <tr class="slds-text-heading_label">
                            <th scope="col">  
                                <div class="slds-truncate slds-border_right" style = "white-space: pre-wrap" title={label.cfCalculated}>{label.cfCalculated}</div>  
                            </th>
                            <th scope="col">  
                                <div class="slds-truncate" style = "white-space: pre-wrap" >{codeGenerated}</div>  
                            </th>
                        </tr>
                    </thead>
                </table>
            </div>
        </lightning-card>
    </template>
    <template if:true = {isError}>
        <lightning-card>
            <div class="slds-align_absolute-center" style="height:3rem">{errorMsg}</div>
        </lightning-card>
        
    </template>

    <div class="slds-align_absolute-center" style="height:5rem">
        <lightning-button variant="brand" label={label.cancel} title={label.cancel} onclick={handleCancel} class="slds-m-left_x-small"></lightning-button>
        <lightning-button variant="brand" label={label.save} title={label.save} onclick={handleSave} class="slds-m-left_x-small"></lightning-button> 
    </div>
 </template>

I get the following when I click the button:

As can be seen from the above image I am getting 2 modals, one of LWC (the one with greyed boxes) and the other of Aura (behind the LWC a wide, thin modal). I would like to show only the LWC modal. How can I remove the other one in the background?

Answer 1

I found the solution in this blog. You can hide the Aura Modal using the CSS in the blog and the rest is straight forward.