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?

1
  • Looks like a platform bug. Requested support about it. Jul 6, 2017 at 7:29

3 Answers 3

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)
}
1
  • 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. Jul 5, 2017 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.

2
  • 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? Jul 5, 2017 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, 2017 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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .