Constraining number of children in a ViewStack issue

Question

I have the following code to create a ViewStack which is used as a dataprovider for a TabBar:

    <s:TabBar id="objectTab" dataProvider="{vs_objects}"/>
       <mx:ViewStack id="vs_objects" width="100%" />

I want to constrain the number of children the ViewStack to avvoid the tabs going out of the screen when the user opens many tabs without closing any. I attempt to do this by removing the oldest element in the ViewStack when the user opens a new tab and the size of the ViewStack is above 9.

private function openTab(object:Object): void {
  //Create a new NavigatorContent(form) and add it to the ViewStack
  ........
  vs_objects.addChild(form);
  if(vs_objects.numChildren > 9) {
    vs_objects.removeChildAt(0);     
  }
  //vs_objects.selectedChild = form;
  vs_objects.selectedIndex = (vs_Tiltaksbanken.numChildren -1);
}

The image below illustrates my problem, where the dark grey color illustrates the selected Tab. There should only be one selected tab, which works perfectly fine with both the child selection approaches above, when i don't remove a child before selecting a new. When i remove a child and then open a new Tab, the new Tab does not get selected properly, it only gets "painted" in the selected color. In This case Tab 40 is still shown when i open Tab 41 (exceeding 9 tabs). The result of this issue is that Tab 41 is not rendered completely.

Does anyone know how i can fix this problem, or have a different approach for constraining the number of Tab's/ViewStack-children?

UPDATE: The problem was my AS3 code inside the childrens NavigatorContent's that caused the application to behave this way. The solution was using the callLater method:

The solution to my problem was using the callLater method as shown below with Adnan Doric's code example:

 protected function openTab():void
 {
    var form:Container = new Container();
    form.name = "Tab " + counter++;
    vs_objects.addChild(form);
    vs_objects.selectedChild = form;
    callLater(removeTab);
 }
 private function removeTab(): void {
    if (vs_objects.numElements > 10)
      vs_objects.removeElementAt(0);
 }

Answer 1

Try this, even though I'm not sure it is the correct solution, maybe it's better to implement some kind of scrolling.

<?xml version="1.0" encoding="utf-8"?>
<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" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.core.Container;

            private var counter:int = 1;

            protected function openTab():void
            {
                var form:Container = new Container();
                form.name = "Tab " + counter++;
                vs_objects.addChild(form);
                if (vs_objects.numElements > 10)
                    vs_objects.removeElementAt(0);
                vs_objects.selectedChild = form;
            }

        ]]>
    </fx:Script>

    <s:TabBar id="objectTab" top="32" labelField="name" dataProvider="{vs_objects}"/>
    <mx:ViewStack id="vs_objects" width="100%" />
    <s:Button label="addTab" click="openTab()" />
</s:Application>

Hope that helps :)