Set selectedItem on a Flex Combobox when the Combobox is not displayed?

Question

I am trying to set selectedItem on a comboBox(mx). Following is the code :

callLater(function ():void {
        if (comboBox.dataProvider && comboBox.dataProvider.length > 0) {
            comboBox.selectedItem = comboBox.dataProvider.getItemAt(0);
        }
});

EDIT : I am creating Comboboxes programatically :

var comboBox:ComboBox = new ComboBox();

This works fine and sets the selectedItem to the first item from the data provider - but ONLY if the combobox is displayed on the screen and not hidden within a collapsible group.

I have a situation where I may have the combobox enclosed within a Collapsible Group (my own component) and not displayed until the collapsed group is expanded (see images below)

First Image : When the groups are collapsed and combobox is not displayed but created

Second Image : when the collapsed group is expanded to display the combobox - notice that the first element in the dataprovider is NOT selected as selectedItem

following line is ALWAYS executed

 comboBox.selectedItem = comboBox.dataProvider.getItemAt(0);

But the first item is not selected in the case when the combobox is enclosed in a collapsed group - works fine when the combobox is enclosed in an expanded group.

I think this is a bug in flex - unless someone thinks otherwise ?

Answer 1

I have seen this issue in the past. I work around it by setting a global variable and setting the selected item of the comboBox to the value of the variable.

For example:

private var comboBoxValue:int = 0;

Then on your comboBox:

<mx:ComboBox id="myComboBox" updateComplete="{myComboBox.selectedItem = comboBoxValue}" change="functionToChangeVariable()"/>

Answer 2

The problem is that you can not know when the object is added to the stage. As you alread mentioned, the item will not be set if the component is not visible.

Creation Complete is not called multiple times, therefore you need another way to do it. To make sure the item is set to the component after it is visible again, just call the 'callLater' method on the comboBox itself (Then the method is just called after the component has been rendered again, instead of you whole application)

var comboBox:ComboBox = new ComboBox();

comboBox.callLater(function ():void {
    if (comboBox.dataProvider && comboBox.dataProvider.length > 0) {
        comboBox.selectedItem = comboBox.dataProvider.getItemAt(0);
    }
});

Answer 3

I working with combobox since flex sdk 3. I used to set selectedIndex instead of selectedItem. Kind of workaround but always works for me:

<ComboBox id="comboBox"
   dataProvider="{model.dataProvider}"
   selectedIndex="{getItemIndex(comboBox.dataProvider, model.currentItem}"
   change="model.currentItem = comboBox.selectedItem"/>
  //getItemIndex - function with simple list.getItemIndex()

Works for both mx and spark.

Answer 4

I could fix this issue by setting the selected item on CREATION_COMPLETE as follows:

comboBox.addEventListener(FlexEvent.CREATION_COMPLETE, function(){
         comboBox.selectedItem = comboBox.dataProvider.getItemAt(0);
});