Spark list not displaying selection when an item is removed

Question

I have an issue with Spark Lists whereby I am trying to ensure that an item is always selected and ensure that the GUI displays this to the user.

The application (full code below) creates a List, a Label and a Button. The Label states what is selected in the List. The button removes the selected item. Changing the selection, updates the text in the Label. Important: The List has "requireSelection" set to true to ensure that an item is always selected.

If I select the first item in the List, the selection is correctly reflected in the label. Clicking "Remove" removes the item and the next item is selected. This is all working correctly.

If I select any item OTHER than the first, then click "Remove", the list is displayed as if there is no selection. However the Label shows that the first item is selected. If I attempt to select item 1 (by clicking on it), nothing appears to happen (i.e. the item does not look selected). If I click any other item it selects correctly and the List appears to start working again.

Help. Is this a bug or do I need to manually "kick" the List? Should I be using "requireSelection" to enforce a selection?

Thanks,

Phil

<?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"
           initialize="init()">

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

    private function init():void {
        myList.addEventListener(FlexEvent.VALUE_COMMIT, updateSelectionLabel);

        var ac:ArrayCollection = new ArrayCollection()
        ac.addItem("Adam");
        ac.addItem("Bob");
        ac.addItem("Charlie");
        ac.addItem("Dave");
        myList.dataProvider = ac;
    }

    private function updateSelectionLabel(event:Event):void {
        selectedItemLabel.text = myList.selectedItem.toString();
    }

    protected function removeClicked(event:MouseEvent):void {
        myList.dataProvider.removeItemAt( myList.selectedIndex );
    }

    ]]>
    </fx:Script>

    <s:List id="myList" x="10" y="10" width="300" height="120"
        requireSelection="true"/>
    <s:Label x="10" y="140" id="selectedItemLabel" text="-selectedItem-"/>
    <s:Button x="10" y="160" label="Remove Selected Item" click="removeClicked(event)"/>
</s:Application>

Answer 1

For some reason, the dataProviderRefreshed action in the spark list sets the current caret index to NO index. Why? I'm not entirely sure, but anyway, the solution is pretty simple.

protected function removeClicked(event:MouseEvent):void {
    if(myList.dataProvider.length>1){
        var delIndex:int = myList.selectedIndex;
        myList.selectedIndex = 0;
        myList.dataProvider.removeItemAt( delIndex );
   }
}

Just set the index to 0 BEFORE you remove it, then the caret is always set properly.

My code also assumes you can not delete the LAST index, or else you won't have anything selected. but you can change that if you want.