I'm experiencing a weird issue when trying cmp.find('id') with elements inside and outside <aura:if>
. Here is the code:
<aura:attribute name="editMode" type="boolean" default="false"/>
<div class="slds">
<ui:inputText aura:id="text1" class="slds-input" value="11223" disabled="true"/>
<div class="slds-modal__content">
<ui:inputText aura:id="text2" class="slds-input" value="11223" disabled="true"/>
<aura:if isTrue="{!v.editMode}">
<ui:inputText aura:id="text1" class="slds-input" value="11223" disabled="true"/>
</aura:if>
JS Controller:
console.log("text1: "+cmp.find("text1"));
console.log("text2: "+cmp.find("text2"));
console.log("text3: "+cmp.find("text3"));
Console:
text1: markup://ui:inputText {8:557;a} {text1}
text2: markup://ui:inputText {8:557;a} {text2}
text1: undefined
Note:
- The first time it runs, none of them is undefined.
- The second time, last one (inside
aura:if
) is undefined. - editMode is set to true in helper's
init
so assume it's alwaystrue
. - If I use
<aura:if isTrue="true">
oreditMode
attribute's default is true, it always runs fine and all values are "defined"
Help is appreciated.