backgroundContext not working for Edit NavigationMixin LWC

Question

I have overridden standard edit page with a lightning controller which will redirect to standard lightning record page or custom lightning component by different recordtypes.

The problem i am facing is when i press the standard Cancel button which appears on the modal, it just closes the modal, but it doesn't reditrect to record detail page.

To resolve this i checked for backgroundContext. This is working fine for New record page navigation, but for edit the backgroundContext is not working.

i am trying to make the page see like this

but currently the background is coming as blank.

JS

  if (this.mode === 'edit') {
        this[NavigationMixin.Navigate]({
            type: 'standard__objectPage',
            attributes: {
                recordId: this.recordId,
                objectApiName: 'XYZ__c',
                actionName: 'edit'
            },
            state: {
                nooverride: 1,
                backgroundContext: '/lightning/r/XYZ__c/a2Q1j0000001nomEAA/view'
            }
        });
    }

Answer 1

I have just resolved the same problem. In the state attribute, you should add navigationLocation: 'DETAIL'. The state attributes are nearly undocumented. I have found that i should put DETAIL value in navigationLocation by inspecting the URL generated after a click on the standard edit button of the view page.

Here is a complete example :

generateBackgroundUrlAndEdit(record_id) {
        this[NavigationMixin.GenerateUrl]({
            type: 'standard__recordPage',
            attributes: {
                recordId: record_id,
                objectApiName: "XYZ__c",
                actionName: 'view'
            },
        }).then(url => {
            this.navigateToEditPage(record_id, url);
        });
    }

    navigateToEditPage(record_id, back_url) {
        console.log('Return page URL = ' + back_url);
        this[NavigationMixin.Navigate]({
            type: 'standard__recordPage',
            attributes: {
                recordId: record_id,
                objectApiName: 'XYZ__c',
                actionName: 'edit'
            },
            state: {
                nooverride: 1,
                navigationLocation: 'DETAIL',
                //backgroundContext: '/lightning/r/XYZ__c/a2h9E000000sqvrQAA/view'
                backgroundContext: back_url
            }
        });
    }

Answer 2

Just had a similar problem with the background page mis-behaving and changing to standard__recordPage for edit fixed it for me.

I have both the edit case and the new case in my code and based on the documentation, separate types need to be used:

    let navigation;
    if (activityId) {
        // Supports clone, edit and view
        navigation = {
            type: 'standard__recordPage',
            attributes: {
                recordId: activityId,
                objectApiName: selectedActivity.objectApiName,
                actionName: 'edit'
            }
        };
    } else {
        // Supports home, list, new
        navigation = {
            type: 'standard__objectPage',
            attributes: {
                objectApiName: selectedActivity.objectApiName,
                actionName: 'new',
            },
        };
    }