Steps to reproduce:
1. Compile and run the below sample piece of code
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" >
<mx:states>
<mx:State name="controlBar">
<mx:AddChild>
<mx:ApplicationControlBar width="80%" dock="true">
<mx:Label text="Normal" color="blue"/>
<mx:Label text="Search:" />
<mx:TextInput width="100%" maxWidth="200" />
<mx:Spacer width="100%" />
<mx:Button label="Go adobe.com" />
</mx:ApplicationControlBar>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox id="v1">
<mx:Button id="b1" label="Goto controlBar" click="currentState='controlBar'"/>
<mx:Button id="b2" label="Goto Base" click="currentState=''"/>
</mx:VBox>
</mx:Application>
2. Click on the button 'Goto ControlBar', notice that ApplicationControlBar is shown.
3. Click on the button 'Goto Base' to go back to base state.
4. Notice that below RTE is thrown. It happens only when ApplcationControlBar dock property is set to true.
ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/removeChild()
at mx.core::Container/removeChild()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\Container.as:2258]
at mx.states::AddChild/remove()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\states\AddChild.as:422]
at mx.core::UIComponent/removeState()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:6917]
at mx.core::UIComponent/commitCurrentState()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:6759]
at mx.core::UIComponent/setCurrentState()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:6698]
at mx.core::UIComponent/set currentState()[E:\dev\flex\sdk\frameworks\projects\framework\src\mx\core\UIComponent.as:4149]
at Test/__b2_click()[C:\mywork\FB\Test.mxml:18]
Actual Results: Docked Application Control Bar breaks state change that results in Application Control Bars removal
Expected Results: No RTE.
Workaround (if any): Setting relativeTo Property for the container containing the buttons.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml" >
<mx:states>
<mx:State name="controlBar">
<mx:AddChild relativeTo="{v1}">
<mx:ApplicationControlBar width="80%" dock="true">
<mx:Label text="Normal" color="blue"/>
<mx:Label text="Search:" />
<mx:TextInput width="100%" maxWidth="200" />
<mx:Spacer width="100%" />
<mx:Button label="Go adobe.com" />
</mx:ApplicationControlBar>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:VBox id="v1">
<mx:Button id="b1" label="Goto controlBar" click="currentState='controlBar'"/>
<mx:Button id="b2" label="Goto Base" click="currentState=''"/>
</mx:VBox>
</mx:Application>