Spark ComboBox - issue with displaying text for new item?

Question

I've been playing with s:ComboBox and generally like them a lot. One detail is driving me nuts though - most likely due to my lack of knowledge in the subject - is that if I try to add a new item to my dataprovider in a changeHandler (registered to the change event) the text for the ComboBox textInput disappears - although the item addition works perfectly. Interestingly enough the same operation works fine if it gets called by clicking on a button, i.e. post the change event has been processed, and the text does not disappear. Here's some code from here that shows this

<?xml version="1.0" encoding="utf-8"?>
<!-- dpcontrols\spark\SparkCBAddItem.mxml -->
<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:layout>
  <s:VerticalLayout paddingTop="5" paddingLeft="5"/>
 </s:layout> 

 <fx:Script>
  <![CDATA[
   import mx.collections.ArrayList;

   import spark.events.IndexChangeEvent;

   [Bindable]
   public var myDP:ArrayList = new ArrayList(["Red", "Orange", "Yellow", "Blue", "Green"]);

   // Event handler to determine if the selected item is new.
   protected function myCB_changeHandler(event:IndexChangeEvent):void
   {
    // Determine if the index specifies a new data item.
    if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
    {
     // Add the new item to the data provider.
     myCB.dataProvider.addItem(myCB.selectedItem);
    }
   }

   protected function button1_clickHandler(event:MouseEvent):void
   {
    // Determine if the index specifies a new data item.
    if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
    {
     // Add the new item to the data provider.
     myCB.dataProvider.addItem(myCB.selectedItem);
    }
   }

  ]]>
 </fx:Script>

 <s:Label text="The selected index is: {myCB.selectedIndex}"/>
 <s:Label text="The selected item is: {myCB.selectedItem}"/>

 <s:ComboBox id="myCB" width="140" change="myCB_changeHandler(event);" dataProvider="{myDP}"/> 
 <s:Button label="Button" click="button1_clickHandler(event)"/>

</s:Application>  

if you take out the change handler you will see that adding a new item and then clicking on the button keeps the new element in the textInput while adding the item to the data provider, which does not happen if you just enter a new item and press enter.

thanks in advance for any help!

Answer 1

Ok, I guess callLater on the contents of myCB_changeHandler seems to do the trick, i.e.

private function later(event:IndexChangeEvent):void
{
    // Determine if the index specifies a new data item.
    if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
    {
        // Add the new item to the data provider.
        myCB.dataProvider.addItem(myCB.selectedItem);
    }

}

// Event handler to determine if the selected item is new.
protected function myCB_changeHandler(event:IndexChangeEvent):void
{
      callLater(later, [event]);
}