Why are my input fields blank and placeholders missing when the section is hidden?

Question

1. Controller that takes the user input for the billing street
2. send it to the Apex Controller which returns the same thing back
3. Hides the section
4. Shows a different section, then on click of a button shows the previous section

Result: Input fields no longer have the value, placeholder is gone, object still has correct values....It only happen when the section is hidden....

App

<aura:application description="myProblemApp" access="PUBLIC" extends="ltng:outApp"> <aura:dependency resource="c:myProblemComponent"/> </aura:application>

Component

<aura:component description="myProblemComponent" controller="myProblemController">

    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <aura:attribute name="theAccount" access="public" default="{'sobjectType' : 'Account'}" type="Account" required="true"/>
    <aura:attribute name="isEdit" access="public" type="Boolean" default="true"/>

    <aura:renderIf isTrue="{!v.isEdit}">
        <fieldset class="slds-form--compound">
            <legend class="slds-form-element__label slds-text-title--caps">Address</legend>
            <div class="slds-form-element__group">
                <div class="slds-form-element__row">
                    <lightning:input aura:id="bAddress" name="bAddress" label="Address"
                                     placeholder="Enter Billing Address"
                                     type="String"
                                     value="{!v.theAccount.BillingStreet}"
                                     required="true"/>

                </div>
            </div>

        </fieldset>

        <div class="slds-align--absolute-center">
            <lightning:button aura:id="save_btn" label="Save Billing Address" name="baButton" variant="brand"
                              onclick="{!c.upsertAccount}" disabled="false"/>
        </div>

        <aura:set attribute="else">
            <article class="slds-card slds-card--compact">
                <div class="slds-card__header slds-grid">
                    <header class="slds-media slds-media--center slds-has-flexi-truncate">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-standard-contact"
                                  title="description of icon when needed">
                                <c:svgIcon category="standard" size="small" name="contact"
                                           svgPath="/resource/AppFrontier_Assets/assets/icons/standard-sprite/svg/symbols.svg#user"/>
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <h2>
                                <a href="javascript:void(0);" class="slds-card__header-link slds-truncate">
                                    <span class="slds-text-heading--small">Card Header</span>
                                </a>
                            </h2>
                        </div>
                    </header>
                    <div class="slds-no-flex">
                        <button type="button" onclick="{!c.editAddress}" class="slds-button slds-button--neutral">Edit
                        </button>
                    </div>
                </div>
                <div class="slds-card__body">
                    <div class="slds-grid slds-grid--align-center">
                        Card Body (custom goes in here)
                    </div>
                </div>
                <div class="slds-card__footer">Email</div>
            </article>
        </aura:set>
    </aura:renderIf>


</aura:component>

JS Controller

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

    },
    upsertAccount: function (component, event, helper) {

        var action = component.get("c.upsertTheAccount");
        var a = component.get("v.theAccount");

        component.find('save_btn').set('v.disabled', true);

        action.setParams({
            "acc": JSON.stringify(a) //Need to stringify this or we get Unable to read sObject Error
        });

        action.setCallback(this, function (response) {
            var state = response.getState();

            if (state == "SUCCESS" && component.isValid()) {
                var r = response.getReturnValue();
                component.set("v.theAccount", r);
                component.set('v.isEdit',false);

            }
            else {
                console.log("failed  ::: " + response.getError()[0].message); // Unable to read sObject

            }
            component.find('save_btn').set('v.disabled', false);
        });

        $A.enqueueAction(action);
    },
    editAddress : function(component){

        console.log(component.get('v.theAccount'));
        component.set('v.isEdit',true);
    }
})

Apex Controller

public class myProblemController {
    @AuraEnabled
    public static Account upsertTheAccount(string acc) {
        Account a = (Account)json.deserialize(acc,Account.class);
        return a;
    }

}

Apex Page

<apex:page id="myProblemPage" showHeader="false" sideBar="false" standardStylesheets="false">


        <apex:includeLightning/>

        <script>

            $Lightning.use("c:myProblemApp", function () {
                $Lightning.createComponent(
                        "c:myProblemComponent",
                        {},
                        "the_content",
                        function (cmp) {
                        });
            });

        </script>

                <div id="the_content">
                </div>

</apex:page>

Screens

On Load

Entered Value

After button click

On Edit Click

Now, i MUST be doing something fundementally wrong here cause this is such a basic scenario that if I am having this much trouble I find it hard to believe anyone can get anything done with lightning. I have spent my whole day trying to get this working but I can't.

I am leaning on you all for assistance....Otherwise, I give up.....

Answer 1

I was able to reproduce the issue, its seems like you are using the deprecated aura:renderIf instead of recommended aura:if.

aura:renderIf is Deprecated. Use aura:if instead.

Using aura:if will fix your issue.