weird flex behaviour with states and radio buttons

Question

i have the following flex component:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" 
         width="400" 
         height="300"
         borderColor.male="blue"
         borderColor.female="#FF00F6"
         initialize="init(event)">

    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            protected function genderChanged(event:Event):void
            {               
                setByRadioGroup();
            }

            protected function init(event:FlexEvent):void
            {
                currentState = "male";
                //setByRadioGroup()
            }

            protected function setByRadioGroup():void {
                currentState = genderGroup.selectedValue as String;
            }

        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <s:RadioButtonGroup id="genderGroup" change="genderChanged(event)">

        </s:RadioButtonGroup>
    </fx:Declarations>
    <s:states>
        <s:State name="male"/>
        <s:State name="female"/>
    </s:states>
    <s:Form>
        <s:FormItem label="name">
            <s:TextInput name="nameField" id="nameField"/>
        </s:FormItem>
        <s:FormItem label="gender">
            <s:RadioButton label="male" groupName="genderGroup" selected.male="true"/>
            <s:RadioButton label="female" groupName="genderGroup" selected.female="true"/>
        </s:FormItem>
    </s:Form>
</s:BorderContainer>

im trying to get the entire state of the component (incl. selected radio button) to initialize by setting the currentState to "male". this works initially (correct radio button is selected and border is blue):

but when i click the other radio button the ui sometimes ends up in a weird state - the radio selection reverts back to the original but the border color changes:

is there some sort of race here im missing?

im using flex 4.6.0 and flash builder 4.7

Answer 1

You have to tell the selected value for the other state as well for that it works like expected:

<s:RadioButton label="male" groupName="genderGroup" selected.male="true" selected.female="false"/>
<s:RadioButton label="female" groupName="genderGroup" selected.female="true" selected.male="false"/>

Though I would rather not set the selected values with the state identifier. I would add a state change listener in the component and set the selected values in its handler function. But this is only a personal choice....