Mx Tree fails when duplicate items are added to an existing node

Question

I'm maintaining a large legacy Flex 4.6 project which refuses to die and have run into an issue with the Mx Tree component that I have not been able to solve. The gist is that adding items to an existing node exhibits weird behavior if the items are duplicates. If the node is created with unique items the component behaves as expected.

For example, the image below shows the result of adding the file "AAAAA.png" multiple times to the existing node. The highlighting goes berserk and the component seems to get confused about how many items it has (have tested this).

I've tried the "refresh tree" hack (below) of resetting the data provider, etc. and I call refresh on the various backing Array Collections. I started to go down the road of replacing the Mx Tree with a Spark Tree that someone came up with but it was turning into too much time.

Before I tell the client to let go of this feature, does anyone have a thought about what the issue might be? I am more of an Actionscript than a Flex developer and don't know my way around components beyond just using them.

---

    protected function vfAddToBtn_clickHandler(event:MouseEvent):void
    {
        if (virtualFoldersList.selectedItem == null){
            Alert.show("Please select a virtual folder to add to", "Add to Virtual Folder", Alert.OK);

        } else {
            if (briefcaseData.currentSelectionsList.length > 0){
                var vf:VirtualFolder = virtualFoldersList.selectedItem as VirtualFolder;

                if (vf != null){
                    vf.children.addAll(briefcaseData.currentSelectionsList);
                    vf.children.refresh();
                    briefcaseData.virtualFoldersArray.refresh();
                    refreshTree(virtualFoldersList);

                } else {
                    trace("ERROR: vfAddToBtn_clickHandler vf is null");
                }
            }
        }
    }

---

        private function refreshTree(tree:Tree) : void
        {
            var selectedIndex : int = tree.selectedIndex;
            var openItems : Object = tree.openItems;
            tree.dataProvider = tree.dataProvider;
            tree.openItems = openItems;
            tree.validateNow();
            tree.selectedIndex = selectedIndex;
        } 

Answer 1

And the answer is...that the Mx Flex Tree from Flex 4.6 is just broken. I have tried everything, even creating a new ArrayCollection from the source arrays of the two ArrayCollections I was trying to merge (the code below). The result is the same: if there is a duplicate item, then the rollover item highlighting in the component is wrong and the component becomes confused about how many items it contains.

Oh well.

---

protected function vfAddToBtn_clickHandler(event:MouseEvent):void
            {
                if (virtualFoldersList.selectedItem == null){
                    Alert.show("Please select a virtual folder to add to", "Add to Virtual Folder", Alert.OK);

                } else {
                    if (briefcaseData.currentSelectionsList.length > 0){
                        var vf:VirtualFolder = virtualFoldersList.selectedItem as VirtualFolder;

                        if (vf != null){

                            var temp: Array = new Array();
                            var sourceArray: Array;
                            var i:int;

                            if (vf.children.length > 0){
                                sourceArray = vf.children.source;
                                for (i=0; i < sourceArray.length; i++){
                                    temp.push(sourceArray[i]);
                                }
                            }

                            sourceArray = briefcaseData.currentSelectionsList.source;
                            for (i=0; i < sourceArray.length; i++){
                                temp.push(sourceArray[i]);
                            }

                            vf.children = new ArrayCollection(temp);
                            vf.children.refresh();
                            briefcaseData.virtualFoldersArray.refresh();
                            refreshTree(virtualFoldersList);

                        } else {
                            trace("ERROR: vfAddToBtn_clickHandler vf is null");
                        }
                    }
                }
            }

Answer 2

Is briefcaseData.currentSelectionsList XMLList or XML?

Use the new XML / XMLList accordingly in the below line

vf.children.addAll(briefcaseData.currentSelectionsList)

as

vf.children.addAll(new XMLList(briefcaseData.currentSelectionsList))

Answer 3

I have created a example application for the answer I given earlier and it is working fine for me. Please check this code.

<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"
            creationComplete="creationCompleteHandler(event)">
<s:layout>
    <s:VerticalLayout />
</s:layout>
<fx:Declarations>
    <fx:XML id="xmlData"><list>
        <department title="Finance" code="200">
            <employee name="John H"/>
            <employee name="Sam K"/>
        </department>
        <department title="Operations" code="400">
            <employee name="Bill C"/>
            <employee name="Jill W"/>
        </department>
        <department title="Engineering" code="300">
            <employee name="Erin M"/>
            <employee name="Ann B"/>
        </department>
    </list></fx:XML>
    <fx:XML id="empData"><employee></employee></fx:XML>
</fx:Declarations>
<fx:Script>

    import mx.collections.XMLListCollection;
    import mx.events.FlexEvent;

    [Bindable]
    private var company:XML;
    [Bindable]
    private var companyData:XMLListCollection;

    private function treeLabel(item:Object):String {
        var node:XML = XML(item);
        if (node.localName() == "department")
            return node.@title;
        else
            return node.@name;
    }

    private function addEmployee():void {
        if (tree.selectedItem.localName() == "employee")
            return;
        var newNode:XML = new XML(empData);
        newNode.@name = empName.text;
        var dept:XMLList = XMLList(tree.selectedItem);
        if (dept.length() > 0) {
            dept.appendChild(newNode);
            empName.text = "";
        }
        companyData.refresh();
    }

    private function removeEmployee():void {
        var node:XML = XML(tree.selectedItem);
        if (node == null)
            return;
        if (node.localName() != "employee")
            return;
        var children:XMLList = XMLList(node.parent()).children();
        for (var i:Number = children.length() - 1; i >= 0; i--) {
            if (children[i].@name == node.@name) {
                delete children[i];
            }
        }
    }

    private function creationCompleteHandler(event:FlexEvent):void {
        company = new XML(xmlData);
        companyData = new XMLListCollection(company.department)
    }
</fx:Script>
<mx:Tree id="tree" top="72" left="50" dataProvider="{companyData}"
         labelFunction="treeLabel" height="225" width="300"
         defaultLeafIcon="{null}" folderClosedIcon="{null}"
         folderOpenIcon="{null}"/>
<mx:VBox>
    <mx:HBox>
        <mx:Button label="Add Operations Employee" click="addEmployee();" />
        <mx:TextInput id="empName" />
    </mx:HBox>
    <mx:Button label="Remove Selected Employee" click="removeEmployee();" />
</mx:VBox>