Skip to content

Instantly share code, notes, and snippets.

@brianmfear
Last active December 23, 2018 08:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save brianmfear/16795c40745ca683f3db9878b60ceed3 to your computer and use it in GitHub Desktop.
Save brianmfear/16795c40745ca683f3db9878b60ceed3 to your computer and use it in GitHub Desktop.
aura:if breaks again.
<aura:application >
<aura:attribute name="value1" type="String" access="private" />
<aura:attribute name="value2" type="String" access="private" />
<lightning:input value="{!v.value1}" label="Value 1" placeholder="Enter 'a'" />
<aura:if isTrue="{!v.value1 eq 'a'}">
<lightning:input value="{!v.value2}" label="Value 2" placeholder="Enter 'b'" />
<aura:if isTrue="{!v.value2 eq 'b'}">
<lightning:input label="Value 3" value="{!join(' ',v.value1,v.value2)}" />
</aura:if>
</aura:if>
<!--
To make the error happen:
type in 'a' in the first box,
'b' in the second box,
then change the value of box 1 twice.
Access Check Failed! AttributeSet.get(): attribute 'value2' of component 'markup://c:demo1 {1:0}'
is not visible to 'markup://aura:if {6:0}'.
Failing descriptor: {aura:if}
-->
</aura:application>
<aura:application extends="force:slds">
<aura:attribute name="value1" type="String" access="private" />
<aura:attribute name="value2" type="String" access="private" />
<lightning:input value="{!v.value1}" label="Value 1" placeholder="Enter 'a'" />
<div class="{!v.value1 eq 'a'?'':'slds-hide'}">
<lightning:input value="{!v.value2}" label="Value 2" placeholder="Enter 'b'" />
<div class="{!v.value2 eq 'b'?'':'slds-hide'}">
<lightning:input label="Value 3" value="{!join(' ',v.value1,v.value2)}" />
</div>
</div>
<!--
Filed as W-5722782.
This workaround will not produce the error.
If not using SLDS, write your own style that's basically "display: none".
-->
</aura:application>
@brianmfear
Copy link
Author

The basic bug is that aura:if has a problem when it has to rerender a lightning component (any component in the lightning namespace, but not aura or ui components, etc). This is a side effect of LWC, essentially. It should only occur with nested aura:if as far as I can tell.

Either use slds-hide or custom CSS, do not use lightning:input or other components, do not nest aura:if, or do not make your attributes private.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment