LWC wrapped in an aura component with weird graphical behaviour

Question

I have a modal lightning-record-from that I have wrapped in an aura component so that I am able to provide the modal as a custom action button on a page. For some reason I have two problems:

1. It seems like the aura component is somehow showing up under my lwc component? I'm not sure how this works - I assumed the LWC would fill the aura component. Also, the close button (X in upper right) is mostly un-clickable because most of it is under the area outlined in blue (highlighted with element inspector) which seems like it is a part of the LWC itself, blocking clicks below it to the aura component. I am not doing anything special in my code but I'm not sure how to begin to even fix this.
2. Both of the Cancel and Save buttons don't actually close the modal. I tried first with the closeModal method (which worked as a stand-alone LWC) and then tried adding the closeQA to the aura component but it doesn't seem to fire.

Aura component:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId,force:lightningQuickAction">
    <c:newProductAddToQuoteLineModal recordId="{!v.recordId}" onclose="{closeQA}"/>
</aura:component>

Aura component controller js:

({
    closeQA : function(component, event, helper) {
        console.log('sending e.force:closeQuickAction');
        $A.get("e.force:closeQuickAction").fire();
    }
})

LWC component:

<template>
  <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 LWC header here -->
      <header class="slds-modal__header">
        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Create New Product and Add a Quote Line Item</h2>
      </header>
      <!-- Modal/Popup Box LWC body starts here -->
      <div class="slds-modal__content" id="modal-content-id-1">
        <lightning-record-form
           object-api-name="Product2"
           fields={fields}
           columns="1"
           mode="edit"
           onsubmit={handleSubmit}
           onsuccess={handleSuccess}
           oncancel={handleCancel}
           density="comfy">
        </lightning-record-form>
      </div>
    </div>
  </section>
</template>

LWC js file:

import { LightningElement,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

import addNewQuoteLineItem from '@salesforce/apex/NewProductAddToQuoteLineHelper.addNewQuoteLineItem';
import getFieldSetMembers from '@salesforce/apex/NewProductAddToQuoteLineHelper.getFieldSetMembers';

export default class NewProductAddToQuoteLineModal extends LightningElement {
    @api recordId;

    fields = [];
    
    /* javaScipt functions start */ 
    connectedCallback() {
        console.log('recordId: ' + this.recordId);
        getFieldSetMembers().then(result => {
            this.fields = [];
            var array = result.split(',');
            for(let i = 0; i < array.length; i++){ 
                this.fields.push({fieldApiName: array[i], objectApiName: "Product2"});
            }
        }).catch(error => {
            console.log('error is: ' + error);
            const event = new ShowToastEvent({
                title: 'Error reading fields for Product',
                message: error,
                variant: 'error',
                mode: 'dismissable'
            });
            this.dispatchEvent(event);
        });
    }
 
    closeModal() {
        console.log('closing the model now');
        
        const closeQA = new CustomEvent('close');
        this.dispatchEvent(closeQA);
    }

    handleCancel(event) {
        console.log('handling cancel now');
        this.closeModal();
    }

    handleSubmit(event) {
        console.log('handling submit now');

        event.preventDefault();

        // Get data from submitted form
        const rfields = event.detail.fields;

        // You need to submit the form after modifications
        this.template
            .querySelector('lightning-record-form').submit(rfields);
    }

    handleSuccess(event) {
        addNewQuoteLineItem({ quoteId: this.recordId, 
                              productId: event.detail.id })
            .then(
                result => {
                    this.closeModal();
                }
            ).catch(
                error => {
                    this.closeModal();
                    const event = new ShowToastEvent({
                        title: 'Error creating a new Quote Line',
                        message: error,
                        variant: 'error',
                        mode: 'dismissable'
                    });
                    this.dispatchEvent(event);
                }
            );
    }

    handleError(event) {
        console.log('handling error now');
        this.closeModal();
        this.dispatchEvent(event);
    }

    /* javaScipt functions end */ 
}

Answer 1

I was able to get things to work better by removing the modal tags in the html completely - I guess the aura component that the LWC is wrapped in is already firing as a modal. I changed my LWC component html to:

<template>
        <lightning-record-form
           object-api-name="Product2"
           fields={fields}
           columns="1"
           mode="edit"
           onsubmit={handleSubmit}
           onsuccess={handleSuccess}
           oncancel={handleCancel}
           density="comfy">
        </lightning-record-form>
</template>

And now I get a nice looking modal.. But I haven't yet been able to figure out how to a) get the cancel or save button to actually close the modal, b) get rid of the extra enclosing cancel button (seems to be a default from the aura parent component), and c) how to get the dialog large enough to show all controls without adding the scrollbar. Any suggestions welcomed!!