Seemingly inconsistent behaviour when assigning dataProvider to Flex's PopUpMenuButton

Question

I'm trying to get two different test dropdowns working in the same fashion.

<mx:HBox x="10" y="50" >
    <mx:PopUpMenuButton id="associativeDD"/>
</mx:HBox>
<mx:HBox x="100" y="50" >
    <mx:PopUpMenuButton id="indexedDD"/>
</mx:HBox>

When I use actionscript to assign the dataProvider values however, I seem to get two different results depending on whether I use an associative array or an indexed one.

var arr1:Array = new Array();
arr1['1'] = ({label: "test1"});
arr1['2'] = ({label: "test2"});
arr1['3'] = ({label: "test3"});
associativeDD.dataProvider = arr1;

var arr2:Array = new Array();
 arr2.push({label: "test1"});
 arr2.push({label: "test2"});
 arr2.push({label: "test3"});
indexedDD.dataProvider = arr2;

Here is what it looks like:

flex dropdowns

There is an empty spot in the beginning of the one where I assigned the dataProvider using an associative array, is there any way to do this "properly" so that it looks correct like the indexed one does?

Answer 1

Actionscript arrays are zero-based and sparse. This means, that if you create an array and insert the first element with index 1, the array will have size of 2 and the element with the index 0 will be undefined.

So to get the same results, you need to start with index 0 in case of associative array.