Why does a lightning-record-form display in edit mode the first time it's shown, but view mode on subsequent displays?

Question

I have a lightning-record-form in a modal dialog defined as follows:

<div role="dialog"
        tabindex="-1"
        data-id="editDialog"
        class='slds-modal'>
    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <h2 class="slds-modal__title">Edit Lead</h2>
        </header>
        <div class="slds-modal__content
                    slds-var-p-around_medium">
            <lightning-record-form record-id={recordId}
                                    object-api-name="Lead__c"
                                    fields={fields}
                                    columns="2"
                                    mode="edit"
                                    onsuccess={handleSuccess}
                                    oncancel={handleCancel}>
            </lightning-record-form>
        </div>
    </div>
</div>

It works perfectly the first time, showing a modal dialog with the fields ready to edit.

But regardless of whether I save or cancel the dialog, the second time it appears, it shows up in view mode. Users can edit, but they have to click the pencil button. Everything does appear to work after that, however.

The handlers for the modal simply remove the appropriate classes and if a save has occurred, update the record.

refresh() {
    refreshApex(this._refresh);
}

get dialog() {
    return this.template.querySelector('[data-id="editDialog"]');
}

get backdrop() {
    return this.template.querySelector('[data-id="dialogBack"]');
}

closeDialog() {
    this.dialog.classList.remove('slds-fade-in-open');
    this.backdrop.classList.remove('slds-backdrop_open');
}

handleCancel() {
    this.closeDialog();
}

handleSuccess() {
    this.closeDialog();
    this.refresh();
}

How do I get it to show up in edit mode every time?

Answer 1

When you change the record, the record-form component is not reloaded, just the context is changed. But here you need to reload the component completely so you can get the default behavior same as first time load.

Also instead of manipulating the classList you need to use the if:true attribute. If you use this approach, the framework will automatically mount/unmount the component based on the value.

This is how you do it.

JS code.

showDialog;

openDialog(){
    this.showDialog = true;
}

closeDialog(){
    this.showDialog = false;
}

HTML Code

<div role="dialog" if:true={showDialog}
        tabindex="-1"
        data-id="editDialog"
        class='slds-modal'>
    <div class="slds-modal__container">

    <div class="slds-modal__container">
        <header class="slds-modal__header">
            <h2 class="slds-modal__title">Edit Lead</h2>
        </header>
        <div class="slds-modal__content
                    slds-var-p-around_medium">
            <lightning-record-form record-id={recordId}
                                    object-api-name="Lead__c"
                                    fields={fields}
                                    columns="2"
                                    mode="edit"
                                    onsuccess={handleSuccess}
                                    oncancel={handleCancel}>
            </lightning-record-form>
        </div>
    </div>

</div>

Now you can call the openDialog() and closeDialog() from wherever you want. This will solve the problem of the edit mode as well.

Also, you can use the showDialog to display and hide the backdrop in a similar way.