0

I am having a problem with aura:if tag. As when my condition is false, my field will be invisible. The Problem is when my condition again went true from false then only Label of my inputfield is visible, the textbox got disappear.

onload when condition is true by default

onload when condition is true by default

when condition is false from true

when condition is false from true

when condition is true from false again

when condition is true from false again

here is my code

Component Code:

<aura:attribute name="ShowSection" type="boolean" default="true" />

<lightning:button label="Test" onclick="{!c.SelectAction}"/>

<aura:if isTrue="{!v.ShowSection == true}"> 
    <tr><td>
        <label>
            Assigned To
        </label>
        <force:inputField aura:id="owId" value="{!v.Task.OwnerId}"/>                    
    </td></tr>
</aura:if>

JS Code:

SelectAction: function(component, event, helper) {
    
    var dataToShow = component.get("v.SelectedData");
    if(dataToShow == 'My Data')
    {
        component.set("v.ShowSection", false);    
    }
    else
    {
        component.set("v.ShowSection", true);
    }
}

please help me out. Thanks in advance

2 Answers 2

1

This is a know issue as explained here https://trailblazer.salesforce.com/issues_view?id=a1p3A000000mCebQAE

the workaround mentioned is to use <aura:renderIf >

like this

<aura:renderIf  isTrue="{!v.ShowSection == true}"> 
    <tr><td>
        <label>
            Assigned To
        </label>
        <force:inputField aura:id="owId" value="{!v.Task.OwnerId}"/>                    
    </td></tr>
</aura:renderIf>
1
  • perfect, problem solved! thanks.
    – SF Dev
    Commented Jul 16, 2020 at 11:27
1

If you just want to hide the fields on UI, you can also play with slds-show and slds-hide classes to toggle the field visibility.

Something like this:

<div class="{!v.ShowSection ? 'slds-show' : 'slds-hide'}"> 

You must log in to answer this question.

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