Flex 4: tabIndex is not working inside form - apache-flex

Question

tabIndex is not working properly in the below flex code.
mx:AddChild tag is used to add Login.mxml in index.mxml as shown below:
index.mxml
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:login="com.states.login.*"
initialize="init()"
pageTitle="Demo" >
<mx:Script>
<![CDATA[
public function init():void {
Application.application.currentState = 'initState';
}
]]>
</mx:Script>
<mx:states>
<mx:State name="initState">
<mx:AddChild relativeTo="{MainCanvas}" position="lastChild">
<login:Login id="Login"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox>
<mx:Canvas width="100%" height="100%" id="MainCanvas">
</mx:Canvas>
</mx:VBox>
</mx:Application>
Login.mxml
<mx:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx" >
...
<mx:Form>
<mx:FormItem label="Username:">
<mx:TextInput id="username" tabEnabled="true" tabIndex="1"/>
</mx:FormItem>
<mx:FormItem label="Password:">
<mx:TextInput id="password" displayAsPassword="true" tabEnabled="true" tabIndex="2"/>
</mx:FormItem>
</mx:Form>
...
Tabbing is working when focus is outside the form in browser. But does not work when focus is inside the TextInput control.
The issue was resolved after doing below 2 changes:
Move the code in Login.mxml into index.mxml and removed AddChild method.
year is set to 2006 in xmlns:mx and xmlns:fx namespaces. (Not sure if this was the issue)
How to resolve the tabbing issue without removing AddChild method.