1

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?

  • Looks like a platform bug. Requested support about it. – Yury Bondarau Jul 6 '17 at 7:29
2

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)
}
| improve this answer | |
  • I got your idea to simply hide section by CSS styling and it definitely gonna work, but from my opinion this is not secure enough to have a list of invisible input fields in view mode. – Yury Bondarau Jul 5 '17 at 10:37
2

I used Lightning:input instead of force:inputField and it worked perfectly fine.

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

I dont know in which context this component is going to be used like inside Lightning experience or in VF pages using lightning out or in communities. Generally Force* namespaced components have rendering issues if they are not inside the one.app container(lightning experience URL has this). It quite possible you may have run into that issue.

| improve this answer | |
  • I use it in lightning context (this is a lightning component on lightning record home page in lightning experience). What is your experience with lightning:input (it is still in Beta)? Does it handle lookups correctly? – Yury Bondarau Jul 5 '17 at 10:30
  • Its still in beta but its works fine for most of our scenarios.Most of our data entry close to 95% happens through lightning input components. It cannot handle lookups, you may have to build that on your own. – RedDevil Jul 5 '17 at 10:31
0

As for now the simpliest solution is to use aura:renderIf instead of aura:if. But aura:renderIf is marked as deprecated, so not sure how long this workaround would work.

<aura:renderIf 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}" />

UPD: Confirmed with salesforce support that there is a bug with rendering of force:output/inputField inside aura:if . Internal if of this bug is Salesforce support confirmed that this is a bug. The internal name is W-4151033.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.