+ Start a Discussion
Ertyq MrskErtyq Mrsk 

Submit Button Not Working When Placed Outside Lightning-Record-Edit-Form Tag in Salesforce LWC

In my sample LWC page, I replicated the standard Edit button in Case object, then placed it inside a modal. Record update working so far, but I notice that footer containing Cancel and Save buttons are not fixed. Every time I scroll the custom form, footer also moves with it which is kind of weird.

I placed the footer outside lightning-record-edit-form but Save button is no longer working. I tried to put it back again inside the tag, and it works. Looks like it works only inside it. I really want to maximize update feature of lightning-record-edit-form.

Is there any way wherein I can place it inside lightning-record-edit-form and still achieve a fixed modal footer?

HTML file
<template>

    <div class="slds-theme_default">
    <template if:true={displayModal}>  
    <div class="edit-modal" style="height: 640px;">  
    <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 slds-modal_medium">      
    <div class="slds-modal__container"> 
    <header class="slds-modal__header">
        <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close" onclick={closeModal}>
            <lightning-icon icon-name="utility:close" size="medium"></lightning-icon>
            <span class="slds-assistive-text">Close</span>
        </button>
        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">edit record</h2>
    </header>        
    <div class="slds-modal__content slds-var-p-around_medium" id="modal-content-id-1">
        <lightning-record-edit-form object-api-name="Case" 
                                    onsuccess={handleSuccess}
                                    record-id={recordId}>

           
            <div class="slds-grid slds-wrap"> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="AccountId"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2"> 
                    <lightning-input-field field-name="Status"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Type"> 
                    </lightning-input-field> 
                </div> 
                <div class="slds-col slds-size_1-of-2">                             
                    <lightning-input-field field-name="Origin"> 
                    </lightning-input-field> 
                </div>
                //....and other fields...didn't include, quite long

            </div>      
            <lightning-button class="slds-var-m-top_small" 
                              type="submit" 
                              label="Update"> 
                            </lightning-button>                           

        </lightning-record-edit-form>
    </div>
    </div>    
    </section>    
    </div>
    </template>    
    </div>
</template>

JS FILE
import { LightningElement, track, api } from 'lwc'; 
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
 
export default class CaseEditPage extends LightningElement { 
 
    @api recordId; 
    @track displayModal = true; 

    handleSuccess( event ) { 
         
        const toastEvent = new ShowToastEvent({ 
            title: 'Case Updated', 
            message: 'Case Updated Successfully!!!', 
            variant: 'success' 
        }); 
        this.dispatchEvent( toastEvent ); 
 
    }

}

 
GCW LabsGCW Labs

Not entirely following the footer issue, but you should be able to use a submit button outside the form. It just won't fire the onsubmit action associated with the form, but it doesn't look like you're using that anyway. Put this button anywhere in your lightning component:
 

<lightning-button label="Update" onclick={handleSubmit}></lightning-button>


Then in your JS:

handleSubmit() {
    this.template.querySelector('lightning-record-edit-form').submit();
}