Flex: Why does mouseOut of a DataGroup ItemRenderer cause a state change?

Question

Hi guys,

I've found a very annoying problem with the itemRenderers in a DataGroup in flex 4, when I mouseout of the itemRenderer is returns to its default state. Here's an example:

<s:Application 
    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:BorderContainer>
            <s:DataGroup>
                <s:layout>
                    <s:VerticalLayout gap="1"/>
                </s:layout>

                <s:dataProvider>
                    <s:ArrayCollection>
                        <fx:Object title="One" />
                        <fx:Object title="Two" />
                        <fx:Object title="Three" />
                    </s:ArrayCollection>
                </s:dataProvider>

                <s:itemRenderer>
                    <fx:Component>
                        <s:ItemRenderer>
                            <s:states>
                                <s:State name="expanded" />
                                <s:State name="collapsed" />
                            </s:states>

                            <fx:Script>
                                <![CDATA[
                                    private function expandCollapse():void
                                    {
                                        currentState = (currentState == "collapsed") ? "expanded" : "collapsed";
                                    } 
                                ]]>
                            </fx:Script>
                            <s:VGroup>
                                <mx:Button click="expandCollapse();" label="Click me to hide the number" />
                                <s:SkinnableContainer>
                                    <s:VGroup height="0" height.expanded="NaN">
                                            <s:Label text="{data.title}" />
                                    </s:VGroup>
                                </s:SkinnableContainer>
                            </s:VGroup>
                        </s:ItemRenderer>
                    </fx:Component>
                </s:itemRenderer>
            </s:DataGroup>
    </s:BorderContainer>    
</s:Application>

When the user clicks on the button the VGroup is collapsed as expected, but then if a user moves their mouse out of the item renderer it then collapses, i.e. returns to its default state.

Is this a bug or am I missing something here?

Cheers,

Chris

Answer 1

It turns out that ItemRenderer already has some of its own states. This example works as expected if we use a DataRenderer instead of an ItemRenderer.