Tab order problems with RadioButton-based component

Question

I've got a problem with following example code in flex:

Test.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
    <s:VGroup>
        <s:TextInput id="text1"/>
        <local:TestComponent id="tc1" />
        <local:TestComponent id="tc2" />
        <local:TestComponent id="tc3" />
        <s:TextInput id="text2"/>
    </s:VGroup>
</s:WindowedApplication>

TestComponent.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Declarations>
        <s:RadioButtonGroup id="grp"/>
    </fx:Declarations>
    <s:RadioButton id="redRadio" groupName="grp"/>
    <s:RadioButton id="yellowRadio" groupName="grp"/>
    <s:RadioButton id="greenRadio" groupName="grp"/>    
</s:Group>

When I start the application and press Tab to cycle through controls, the focus jumps to the first text box, then to the first radio button of the first TestComponent, and then directly to the last textbox missing the second and the third TestComponents. This behavior seems wrong to me. Can anyone help me to fix this?

UPD: Explicitely setting tabIndex does not work either:

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:local="*">
    <s:VGroup>
        <s:TextInput id="text1" tabIndex="1"/>
        <local:TestComponent id="tc1" tabIndex="2"/>
        <local:TestComponent id="tc2" tabIndex="3"/>
        <local:TestComponent id="tc3" tabIndex="4"/>
        <s:TextInput id="text2" tabIndex="5"/>
    </s:VGroup>
</s:WindowedApplication>

Answer 1

After some research and debugging into the Flex source i found the solution. My mistake was, that i assumed, that attributes group and groupName must correspond to the same RadioButtonGroup control. But they don't have to! The group attribute can point to the real RadioButtonGroup control and for the groupName (which is used by the FocusManager to find out, if a RadioButton belongs to a group) we can use some randomly generated name. So, the working code looks like this:

TestComponent.mxml:

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         initialize="init()">
    <fx:Script>
        <![CDATA[
            protected function init():void {
                var groupName:String = Math.random().toString();
                redRadio.groupName = groupName;
                yellowRadio.groupName = groupName;
                greenRadio.groupName = groupName;
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:HorizontalLayout/>
    </s:layout>
    <fx:Declarations>
        <s:RadioButtonGroup id="grp"/>
    </fx:Declarations>
    <s:RadioButton id="redRadio" group="{grp}"/>
    <s:RadioButton id="yellowRadio" group="{grp}"/>
    <s:RadioButton id="greenRadio" group="{grp}"/>  
</s:Group>