Flex DropDown selection not working when I search for item - arrays

Question

so here is the problem that I have so far. I tried to simplify my code so I can attempt to figure this out, but I have had absolutely no luck. I have a viewstack that contains 1 dropdown per stack. They share the same data provider. What I want to do is to select the item contents from the first one. Once I do that, when I click a button to the next stack I have a function that searches from index 0 to the dataprovider length and if the item from the first stack matches the second one, I want to have the second dropdown pick that item up and display it. I have it matching, and I try to select it, but when I run the application it shows up like nothing is selected. Here is what I have:
edit: I got it to work for a simple example, but when I attempt to use it in my more complicated example, on that button click it for some reason resets the value of selectedIndex to -1. How do I prevent this from happening? This is working code for the simple example
<?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" applicationComplete="popList()">
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
private var myList : ArrayCollection;
[Bindable]
private var selectedItem : String;
[Bindable]
private var index : int;
[Bindable]
private var ind : int;
private function popList() : void {
myList = new ArrayCollection();
stack.initialize();
myList.addItem("1");
myList.addItem("2");
myList.addItem("3");
myList.addItem("4");
myList.addItem("5");
myList.addItem("6");
first.initialize();
second.initialize();
}
private function goNext() : void {
selectedItem = first.selectedItem;
stack.selectedChild = stackb;
for(index = 0; index < myList.length; index++){
var itemNow : String = myList[index].toString();
if(selectedItem == myList[index].toString()){
ind = index;
}
}
}
]]>
</fx:Script>
<mx:ViewStack id="stack" width="862" height="500">
<s:NavigatorContent id="stacka">
<s:DropDownList x="317" y="174" id="first" dataProvider="{myList}"></s:DropDownList>
<s:Button id="next" x="335" y="263" label="Next" click="goNext()"/>
</s:NavigatorContent>
<s:NavigatorContent id="stackb">
<s:DropDownList x="317" y="174" id="second" dataProvider="{myList}" selectedIndex="{ind}"></s:DropDownList>
</s:NavigatorContent>
</mx:ViewStack>
</s:Application>

Answer 1

I didn't try to run the code, but I have a bunch of observations:
First, don't use the same dataProvider for two separate DropDownLists. It causes weird issues. It makes no sense, I have no idea why; but it does. You could dupe the dataProvider by creating a second collection using the same source. Something like this:
-
second.dataProvider = new ArrayCollection(myList.source);
Second, you shouldn't have to manually call the initialize method on either of the DropDownLists. That is highly unusual. The initialize event is fired as part of the creation process; and I assume the initialization method is part of the default event handler. But, firing that event is not the same as having the component go through it's Lifecycle process.
A ViewStack doesn't initialize it's children before the view changes. So, you are probably setting the selectedIndex on the second DropDownList before that DropDownList is initialized, possibly allowing that drop down list to get lost. You can combat this by setting the creationPolicy to all on the ViewStack.
You can probably solve this issue with binding. Something like this.
-
<s:DropDownList x="317" y="174" id="second" dataProvider="{myList}" selectedIndex="{first.selectedIndex}"></s:DropDownList>
Your code to select the next item is comparing an object to a string, so you'll hever the selectedItem.
You could change your loop to something like this:
for(index = 0; index < myList.length; index++){
if(selectedItem == myList[index]){
second.selectedIndex = index;
}
}
But, if you're using the same dataProvider, or a copy of it, why do you even need the loop? Just use the selectedIndex property:
-
second.selectedIndex = first.selectedIndex
Does that help?
Note: StackOverflow makes it real hard to do code formatting inside a list; sorry for not keeping the numbers in my list.