Lightning Community - relative page navigation to page with lightning:input breaks

Question

I have a strange problem that occurs whenever I navigate to another lightning page using an anchor tag with an href value containing a relative URL (e.g. If I have a lightning page with the url "/mypage", the href value is "/mypage"), or when I fire the e:force:navigateToURL event with a relative URL. What happens is on the 2nd instance of navigating to any lightning page that renders a lightning:input component on initial load, the page will freeze as if there was a JavaScript exception thrown. Sometimes the page will freeze with no indication of it being broken, and sometimes there will be a "..." overlay in the centre of the page that will hang indefinitely. The page remains unusable until I do a hard refresh. There are no errors reported on the console and, when using Chrome, the lightning inspector does not report any errors.

I isolated the issue to the presence of a lightning:input component on the lightning page being rendered because of an error I found when using the "Preview" mode in the Community builder.

I verified that lightning:input is the issue by replacing any instance of lightning:input with either ui:input or a standard HTML5 input tag. Doing so fixed the navigation issue described above.

I haven't found any any other relevant questions on SF Stack Exchange one on developer.salesforce.com, so I'm wondering if anyone else has experienced something similar, and any possible solutions to this problem. I'd ideally like to continue using lightning:input on my pages or at least understand the core reason why this is happening.

--- Edit ---

After coming up with an example for others to replicate, I found out that the root issue is the combination of using 's afterScriptsLoaded attribute to fire a method that will dynamically create a lightning input (it can directly create a lightning input or create another component that, in its markup, has a lightning input) with a relative page navigation. The issue I found is specifically to do with using ltng:require with afterScriptsLoaded, as I cannot reproduce the issue with using an aura handler on the "init" event and using an action.

To replicate:

• Create a lightning community
• Create a test page, which I called "nav-bug-1"
• Create a lightning component, which I called "LightningInputContainer", with the following (replace "" with your own value):

LightningInputContainer.cmp

<aura:component implements="forceCommunity:availableForAllPageTypes">

    <ltng:require
        afterScriptsLoaded="{!c.doInit}"    
    />

    <aura:attribute type="Aura.Component[]" name="lightningInput" />

    <button onclick="{!c.navToCurrentPage}" type="button">Initiate relative page nav</button>

    {!v.lightningInput}

</aura:component>

LightningInputContainerController.js

({
    doInit : function(cmp, event, helper) {

        $A.createComponent(
            'lightning:input',
            {
                label : 'test'
            },
            function(newComponent, status, errMsg) {
                if (status === "SUCCESS") {
                    cmp.set("v.lightningInput", newComponent);
                } else {
                    alert(errMsg);
                }
            }
        );

    },

    navToCurrentPage : function(cmp, event, helper) {
        let urlEvent = $A.get("e.force:navigateToURL");
        urlEvent.setParams({ "url" : '/nav-bug-1' });
        urlEvent.fire();
    }


})

• Using the Community builder, drag and drop LightningInputContainer onto the "nav-bug-1" page
• Using the "Preview" option on the builder, click the anchor "Initiate relative page nav"
• You should see an error window pop up, similar to what has been posted above

Answer 1

I never found the root solution of the issue, and Salesforce support doesn't seem to have much insight on this issue either.

It seems like the issue is the timing of when the lightning component input is dynamically created in its parent component's lifecycle. This issue only manifests using ltng:require with afterScriptsLoaded, but not when using the init event handler. $A.createComponent is already asynchronous, but if I create wrap it in window.setTimeout, even with no specified delay, the creation works as expected and the problem goes away. So the issue is resolved if I create the component outside of the regular component lifecycle.

I ended writing a helper function to help me do this -

createInitialComponents: function(cmp, callback) { window.setTimeout($A.getCallback(callback)); }

where the callback argument is where I do all my dynamic component creation, e.g. $A.createComponent()