Element inside <aura:if> returns undefined

Question

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 always true.
• If I use <aura:if isTrue="true"> or editMode attribute's default is true, it always runs fine and all values are "defined"

Help is appreciated.

Answer 1

You provide same id for two input text. Change the Id of the last one input text and try it again may be it work properly.

Thanks.