Why are the labels mysteriously dissappearing from a ComboBox in Flex 3?

Question

Observe the Flex program below (I'm using Flex Builder 3 w/ 3.5 SDK). The second combobox is conditional on the first. If a 'first name' is chosen, then you are allowed to choose a 'last name'. If 'none' is chosen, then you are not allowed to choose a last name, but rather prompted to choose a first name.

To see the mysterious issue of the disappearing labels, run this program and choose a first name. Then choose a last name. All is well. Then choose 'none' in the first combobox. The prompt of the second combobox changes back, and the last names are removed. All is still well. Then try selecting a first and last name again. You will see that after choosing a first name, the last names do not appear, although the spaces for them do (and if you debug the program, the correct data appears in the dataprovider).

This 'bug' has been killing me on the inside all day. The project in which I'm implementing this behavior is quite a bit more complex, but this sample basically exemplifies what is going on. Is this a bug in Flex, or am I doing something wrong?

Thanks!

<?xml version="1.0" encoding="utf-8"?>

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

        [Bindable]
        public var cbCompanyDP:ArrayCollection = new ArrayCollection( [ { firstName: "None", data: 0 },
                                                                        { firstName: "Bob", data: 1 },
                                                                        { firstName: "Bart", data: 2 } ] );

        [Bindable]
        public var cbEmployeeDP:ArrayCollection = new ArrayCollection();

        public var employees:ArrayCollection = new ArrayCollection( [ { lastName: "Smith" },
                                                                      { lastName: "Smyth" },
                                                                      { lastName: "Smick" },
                                                                      { lastName: "Smack" } ] );

        [Bindable]
        public var prompt:String = "Choose First Name first";

        public function cbFirstNameChange( value:int ):void
        {
            if ( value == 0 )
            {
                employees.removeAll();
                setEmpDP( employees );
                prompt = "Choose First Name first";
            }
            else
            {
                setEmployees();
                setEmpDP( employees );
                prompt = "Now choose Last Name";
            }
        }

        private function setEmpDP( ac:ArrayCollection ):void
        {
            cbEmployeeDP = ac;
        }

        private function setEmployees():void
        {
            employees = new ArrayCollection( [ { lastName: "Smith" },
                                               { lastName: "Smyth" },
                                               { lastName: "Smick" },
                                               { lastName: "Smack" } ] );
        }
    ]]>
</mx:Script>

<mx:HBox>

    <mx:ComboBox dataProvider="{cbCompanyDP}"
        id="cbFirstName"
        labelField="firstName"
        width="200"
        change="cbFirstNameChange(cbFirstName.selectedItem.data)"
        prompt="Choose a first Name" />

    <mx:ComboBox dataProvider="{cbEmployeeDP}"
        id="cbLastName"
        labelField="lastName"
        width="200"
        prompt="{prompt}" />
</mx:HBox>

Answer 1

I tried with a different SDK (3.2 and 4) and it is working on, so I guess it is a bug from 3.5

Answer 2

Well it appears there are two answers: Yes, this is a bug in Flex 3.5 sdk, as it does not happen in 4 (I have not tested with other SDKs). However, since I cannot change SDKs mid-project, the workaround appeared in another question: Flex 3.5.0; Update ComboBox display list upon dataprovider change

Thanks for everyone's input.

Answer 3

do not set new ArrayCollection to dataProvider in Flex 3.5, if data provider was already set - set dataProvider.source (to not make new reference)

Answer 4

I had the same problem just yesterday. It seems to be a bug in 3.5. It happens when you assign a new ArrayCollection object to the one binded in combobox. If you click in the combo box it will refresh, and show the real content.

The solution to this in 3.5: do not assign a new arraycollection to the binded variable. You should only set the source as said by anton, or utilize the add/remove/addAll Item methods.Something like this should work too:

private function setEmpDP( ac:ArrayCollection ):void
    {

        cbEmployeeDp.removeAll();
        cbEmployeeDP.addAll(ac);
    }