[SalesForce] force:inputField and force:ouputField disappear after rerendering

Basically I have code like the following in my component:

Component:

<aura:if isTrue="{!v.isEditMode}">
  <force:inputField value="{!v.contact.LastName}"/>
  <aura:set attribute="else">
    <force:outputField value="{!v.contact.LastName}"/>
  </aura:set>
</aura:if>
<lightning:button variant="neutral" label="{!if(v.isEditMode, 'Save', 'Update')}" onclick="{!c.toggleMode}" />

Controller:

toggleMode : function(component, event, helper) {
    var isEditMode = component.get("v.isEditMode");
    component.set("v.isEditMode", !isEditMode)
}

When it first renders everything works just fine. But, when we re-render (by clicking on button) to make hidden area visible force:outputField and force:inputField disappear.

enter image description here

Does anybody faced this issue, any workarounds?

Best Answer

Hey I am nit sure why are you facing this problem but can you try using the below code if it works - 

<force:inputField value="{!v.contact.LastName}" aura-id="input"/>
<force:outputField value="{!v.contact.LastName}" aura-id="output slds-hide"/>

<lightning:button variant="neutral" label="{!if(v.isEditMode, 'Save', 'Update')}" onclick="{!c.toggleMode}" />

toggleMode : function(component, event, helper) {
    var cmpInput = component.find('input');
    $A.util.toggleClass(cmpInput, 'slds-hide');
    var cmpOutput = component.find('output');
    $A.util.toggleClass(cmpOutput, 'slds-hide');
    var isEditMode = component.get("v.isEditMode");
    component.set("v.isEditMode", !isEditMode)
}
Related Topic